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

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

  componentDidMount() {

  }

  render() {
    const { arrDatos, } = this.props.initState
    const { arrCarousel } = arrDatos
    const { arrImages,checked } = arrCarousel
    
    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.arrCarousel.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) => { arrCarousel.title = event.target.value; this.initsetState({ arrDatos }) } }
                type={'text'} placeholder={ 'Ingresa un título' } value={ arrCarousel.title } />
            </Row>
            
            <Row style={{ marginBottom: 30, }}>
              {
                arrImages.map((t,e) => (
                  <div style={{ display: 'block', width: '100%', borderBottom:'1px solid #dadada',marginBottom:20}}>
                    {
                      t.url === '' ? (
                        <p>Agrega una imagen...</p>
                      ) : (
                        <input className="datosContacto__inputForm__middle z-depth-1" type={'text'} placeholder={'Ingresa un título (opcional)'}
                          value={arrImages[e].title}
                          onChange={ (event) => { arrImages[e].title = event.target.value; this.initsetState({ arrDatos }) } }
                        />
                      )
                    }
                    <div key={`div_upload_perfil`}>
                      <img src={
                        t.url == '' ? 'img/icons/placeholder1.png' : t.url
                      } 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-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 imagen' : 'Cambiar imagen'}</p>
                          </Col>
                          <Col>
                          <a href="#" className="btn btn-primary disenoPage__btnUpload z-depth-2 btn-100 btn-red" onClick={ _ => this.removeImageFromCarrete(e) }>Remover Imagen</a>
                          </Col>
                        </Row>
                        <input accept="image/png, image/jpeg" style={{ display: 'none' }} id={`upload-file-carousel-${e}`} type="file" onChange={(file) => this.onFileChange(e, file)} />
                      </label>
                      <p style={{ fontSize: 12, color: '#777',marginBottom:20,marginTop:10 }}>Medida recomendada 1280x720px</p>

                      {
                        t.url !== '' ? (
                          <>
                            <input className="datosContacto__inputForm__middle z-depth-1" type={'text'} placeholder={'Ingresa un enlace (opcional)'}
                              value={arrImages[e].url_share}
                              onChange={ (event) => { arrImages[e].url_share = event.target.value; this.initsetState({ arrDatos }) } }
                            />
                            <p style={{ fontSize: 12, color: '#777',marginBottom:20,marginTop:10 }}>Puedes redirigir a tu cliente al sitio que tu desees.</p>
                          </>
                        ) : null
                      }
                    </div>
                  </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 { arrCarousel } = arrDatos
    const { arrImages } = arrCarousel
    
    const imgURL = URL.createObjectURL( file.target.files[0] )
    arrImages[index].url     = imgURL
    arrImages[index].files   = file.target.files[0]
    this.initsetState({ arrDatos });
    this.checkMarkValues();
  }

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

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

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

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

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

};

export default withRouter(CarretePage)