import React, { Component } from "react";
import { withRouter, } from "react-router-dom";
import { Row,Col,Container } from 'react-bootstrap'
import axios from 'axios';

class DocumentosPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      indexItemImage: -1,
    }
  }

  componentDidMount() {

  }

  render() {
    const { arrDatos, } = this.props.initState
    let { arrDocumentos } = arrDatos

    const { arrFiles,checked } = arrDocumentos
    
    return (
      <div className={'contactoSidebar__container'} style={{ padding: 15, background: '#f3f3f3', }}>
        <div style={{ padding: 15, background: '#f3f3f3', }}>
          <div style={{ width: '90%', margin: '10px auto', }}>

            <Row style={{ marginBottom: 30, }}>
              <Container style={{display:'flex',flexDirection:'row',alignContent:'center',alignItems:'center'}}>
                <input type={"checkbox"} className="" id="checkCarrete"
                checked={ checked }
                onChange={
                  (e) => {
                    const check = this.props.initState.arrDatos.arrDocumentos.checked = !checked;
                    this.props.initsetState({
                      check
                    })
                  }
                }
                />
                <label className="form-check-label" htmlFor="checkCarrete" style={{color:'#555',paddingLeft:"10px",cursor:'pointer'}}>Mostrar/Ocultar</label>
              </Container>
            </Row>

            <Row>
              <p className={'datosContacto__leyendForm'}>Título</p>
            </Row>
            <Row style={{ marginBottom: 30, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { arrDocumentos.title = event.target.value; this.initsetState({ arrDatos }) } }
                type={'text'} placeholder={ 'Ingresa un título a tu nube' } value={ arrDocumentos.title } />
            </Row>
            
            <Row style={{ marginBottom: 30, }}>
              {
                arrFiles.map((t,e) => (
                  <div style={{ display: 'block', width: '100%', borderBottom:'1px solid #dadada',marginBottom:20}}>
                    {
                      t.url === '' ? (
                        <p>Agrega un documento...</p>
                      ) : (
                      <input className="datosContacto__inputForm__middle z-depth-1" type={'text'} placeholder={'Ingresa un título (opcional)'}
                        value={arrFiles[e].title}
                        onChange={ (event) => { arrFiles[e].title = event.target.value; this.initsetState({ arrDatos }) } }
                      />
                      )
                    }
                    <div key={`div_upload_perfil`}>
                      <label className="form-group" htmlFor={`upload-file-carousel-${e}`} style={{ display: 'block', margin: 0, }}>
                        <Row>
                          <Col>
                            <p className={'btn btn-primary z-depth-2 disenoPage__btnUpload btn-100'} htmlFor={`upload-file-carousel-${e}`} style={{ fontSize: '1rem', color: '#111', cursor: 'pointer'}}>{t.url == '' ? 'Subir documento' : 'Cambiar documento'}</p>
                          </Col>
                          <Col>
                          <a href="#" className="btn btn-primary disenoPage__btnUpload z-depth-2 btn-100 btn-red" onClick={ _ => this.removeImageFromCarrete(e) }>Remover documento</a>
                          </Col>
                        </Row>
                        <input style={{ display: 'none' }} id={`upload-file-carousel-${e}`} type="file" onChange={(file) => this.onFileChange(e, file)} />
                      </label>
                    </div>
                  </div>
                ))
              }
            </Row>


            <Row style={{ marginBottom: 30, }}>
              <Col>
                <button
                  className="datosContacto__inputForm z-depth-2"
                  onClick={() => { this.onAddDiapo() }}
                  >Agregar documento</button>
              </Col>
            </Row>

          </div>
        </div>
      </div>
    );
  }

  onFileChange(index, file) {
    const { arrDatos, } = this.props.initState
    const { arrDocumentos } = arrDatos
    const { arrFiles } = arrDocumentos

    const imgURL = URL.createObjectURL( file.target.files[0] )
    arrFiles[index].url     = imgURL
    arrFiles[index].files   = file.target.files[0]
    arrFiles[index].title   = file.target.files[0].name
    this.initsetState({ arrDatos });
    this.checkMarkValues();
  }

  checkMarkValues() {
    const { arrDatos,arrCheck } = this.props.initState
    const { arrDocumentos } = arrDatos

    if(arrDocumentos.arrFiles.length > 0) {
      arrCheck[6].checkMark = true;
    }else{
      arrCheck[6].checkMark = false;
    }
  }

  removeImageFromCarrete(e) {
    const { arrDatos } = this.props.initState
    const { arrDocumentos } = arrDatos
    const { arrFiles } = arrDocumentos
    arrFiles.splice(e,1)
    this.initsetState({ arrDatos })
  }

  onAddDiapo() {
    const { arrDatos, } = this.props.initState
    const { arrDocumentos } = arrDatos
    const { arrFiles } = arrDocumentos
    arrFiles.push({
      url: '',
      title: '',
    })
    this.initsetState({ arrDatos })
  }

  initsetState(param) {
    this.props.initsetState(param)
    return true
  }

};

export default withRouter(DocumentosPage)