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

class DescripcionPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videoPromo: '',
    }
  }

  componentDidMount() {

  }

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

    if(promo.titulo!=='' && promo.descripcion!==''){
      arrCheck[3].checkMark = true;
    }else{
      arrCheck[3].checkMark = false;
    }
  }

  render() {
    const { arrDatos,arrCheck } = this.props.initState
    const { promo } = arrDatos
    const { checked } = promo;

    return (
      <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="checkIntroduccion"
              checked={ checked }
              onChange={
                (e) => {
                  const check = this.props.initState.arrDatos.promo.checked = !checked;
                  this.props.initsetState({
                    check
                  })
                }
              }
              />
              <label className="form-check-label" htmlFor="checkIntroduccion" style={{color:'#555',paddingLeft:"10px",cursor:'pointer'}}>Mostrar/Ocultar</label>
            </Container>
          </Row>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Título</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => {
                promo.titulo = event.target.value;
                this.initsetState({ arrDatos });
                this.checkMarkValues();
              }}
              type={'text'} placeholder={ 'Título del video' } value={promo.titulo} />
          </Row>
          <Row className={'datosContacto__cntBox'} style={{ marginTop: 20, }}>
            <p className={'datosContacto__leyendForm'}>Texto</p>

            <textarea
              className={'datosContacto__inputForm z-depth-1'}
              style={{ minHeight: 200, }}
              onChange={ (event) => {
                promo.descripcion = event.target.value;
                this.initsetState({ arrDatos });
                this.checkMarkValues();
              }}
              placeholder={ 'Ingresa una descripcion' } value={promo.descripcion} />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>URL del video (opcional)</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.setState({ videoPromo: event.target.value }) } }
              type={'text'} placeholder={ 'Ejemplo: https://www.youtube.com/watch?v=woP8Pyqv1lA' } value={this.state.videoPromo} />
            {
              this.state.videoPromo.indexOf('https://www.youtube.com/watch?v=') !== -1
              || this.state.videoPromo.indexOf('youtu.be') !== -1
              || this.state.videoPromo.indexOf('https://www.facebook.com/') !== -1
              || this.state.videoPromo.indexOf('https://player.vimeo.com/video/') !== -1
              || this.state.videoPromo.indexOf('https://tarjeta.id/imports/') !== -1
               ? (
  
              <Col md={6} className="mt-3">
                <button
                className="datosContacto__inputForm z-depth-2"
                onClick={() => {
                  promo.video = this.state.videoPromo;
                  this.initsetState({ arrDatos });
                  this.setState({ videoPromo: '', });
                }}
              >Agregar Video</button>
              </Col>
              ) : null
            }

            {

              promo.video !== '' ? (
                <Col md={6} className="mt-3">
                  <button
                  className="datosContacto__inputForm z-depth-2"
                  style={{backgroundColor:"#ff0350",color:"#fff"}}
                  onClick={
                    () => {
                      promo.video = '';
                      this.initsetState({arrDatos});
                    }
                  }
                  >Eliminar Video</button>
                </Col>
              ) : null 

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

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

};

export default withRouter(DescripcionPage)