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

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

  }

  componentDidMount() {

  }

  render() {
    const { arrDatos, } = this.props.initState
    const { arrCarouselOp } = arrDatos
    const { arrOpiniones,checked } = arrCarouselOp
    
    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="checkOpiniones"
                checked={ checked }
                onChange={
                  (e) => {
                    const check = this.props.initState.arrDatos.arrCarouselOp.checked = !checked;
                    this.props.initsetState({
                      check
                    })
                  }
                }
                />
                <label className="form-check-label" htmlFor="checkOpiniones" 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) => { arrCarouselOp.title = event.target.value; this.initsetState({ arrDatos }) } }
                type={'text'} placeholder={ 'Ingresa un título' } value={ arrCarouselOp.title } />
            </Row>

            <Row style={{marginBottom:30}}>
                {
                    arrOpiniones.map((t,e) => (
                        <div style={{
                            display:'block',
                            width:'100%',
                            borderBottom:'1px solid #dadada',
                            marginBottom:20,
                            paddingBottom:20
                        }}>
                            <Row>
                                <Col md={12}>
                                    <div key={`div_upload_perfil`}>
                                        <img src={
                                            t.img == '' ? 'img/icons/placeholder1.png' : t.img
                                        } alt={'Placeholder'}
                                            style={{ width: 100, height: 100, objectFit: 'contain',border:'5px solid #fff',borderRadius:'9px',padding:'3px',boxShadow:'0px 0px 2px 1px rgba(0,0,0,0.3)',marginTop:10 }}
                                        />
                                        <label className="form-group" htmlFor={`upload-file-carouselop-${e}`} style={{ display: 'block', margin: 0, }}>
                                        <Row>
                                            <Col md={6}>
                                            <p className={'btn btn-primary z-depth-2 disenoPage__btnUpload btn-100'} htmlFor={`upload-file-carousel-${e}`} style={{ fontSize: '1rem', color: '#111', cursor: 'pointer'}}>Subir imagen</p>
                                            </Col>
                                        </Row>
                                        <input accept="image/png, image/jpeg" style={{ display: 'none' }} id={`upload-file-carouselop-${e}`} type="file" onChange={(file) => this.onFileChange(e, file)} />
                                        </label>
                                        <p style={{ fontSize: 12, color: '#777',marginBottom:20,marginTop:10 }}>Medida recomendada 1280x720px</p>
                                    </div>
                                </Col>
                                <Col md={12}>
                                    <label className="datosContacto__leyendForm" htmlFor={`input-nombre-opinion-${e}`} style={{marginTop:20}} >Nombre</label>
                                    <input 
                                    className={'datosContacto__inputForm z-depth-1'}
                                    placeholder={'Ingresa un nombre'}
                                    type="text" 
                                    id={`input-nombre-opinion-${e}`} 
                                    onChange={
                                        (event) => { 
                                            arrOpiniones[e].autor = event.target.value; this.initsetState({ arrDatos })  
                                        }
                                    }
                                    value={ arrOpiniones[e].autor }
                                    />
                                </Col>
                                <Col md={12}>
                                    <label className="datosContacto__leyendForm" htmlFor={`input-cargo-opinion-${e}`} style={{marginTop:20}}>Cargo</label>
                                    <input 
                                    className={'datosContacto__inputForm z-depth-1'}
                                    placeholder={'Ingresa un cargo'}
                                    type="text" 
                                    id={`input-cargo-opinion-${e}`}
                                    onChange={ (event) => {
                                        arrOpiniones[e].trabajo = event.target.value;
                                        this.initsetState({arrDatos})
                                    } }
                                    value={ arrOpiniones[e].trabajo }
                                    />
                                </Col>
                                <Col md={12}>
                                    <label className="datosContacto__leyendForm" htmlFor={`input-texto-opinion-${e}`} style={{marginTop:20}}>Texto</label>
                                    <textarea 
                                    className={'datosContacto__inputForm z-depth-1'}
                                    placeholder={'Introduce un texto'}
                                    id={`input-text-opinion-${e}`} cols="30" rows="5"
                                    onChange={
                                        (event) => {
                                            arrOpiniones[e].val = event.target.value; 
                                            this.initsetState({arrDatos})
                                        }
                                    }
                                    value={ arrOpiniones[e].val }
                                    ></textarea>
                                </Col>
                                <Col>
                                    <a href="#" className="btn btn-primary disenoPage__btnUpload z-depth-2 btn-100 btn-red" onClick={ _ => this.removeImageFromCarrete(e) }>Remover Diapositiva</a>
                                </Col>
                            </Row>
                        
                        </div>
                    ))
                }
            </Row>

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


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

  onFileChange(index, file) {
    const { arrDatos, } = this.props.initState
    const { arrCarouselOp } = arrDatos
    const { arrOpiniones } = arrCarouselOp
    
    const imgURL = URL.createObjectURL( file.target.files[0] )
    arrOpiniones[index].img     = imgURL
    arrOpiniones[index].files   = file.target.files[0]
    this.initsetState({ arrDatos });
    this.checkMarkValues();
  }

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

    if(arrCarouselOp.arrOpiniones.length > 0){
      arrCheck[7].checkMark = true;
    }else{
      arrCheck[7].checkMark = false;
    }
  }

  onAddDiapo() {
    const { arrDatos, } = this.props.initState
    const { arrCarouselOp } = arrDatos
    const { arrOpiniones } = arrCarouselOp
    arrOpiniones.push({
      img: 'img/icons/profile2.png',
      val: '',
      autor: '',
      trabajo: ''
    })
    this.initsetState({ arrDatos })
  }

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


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

};

export default withRouter(OpinionesPage)