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

class EmailPage extends Component {
  constructor(props) {
    super(props);
    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
    this.state = {
      inputEmail: '',
      inputAlias: '',
      inputMensaje: 'Hola ¿Me podrías dar más información?',
      editEmailStatus: false,
      indexInput: 0
    }

  }

  componentDidMount() {
    const { formValidate } = this.props.initState;
    const { isValidate,input } = formValidate;
    if(isValidate){
      if(input==="email"){
        this.textInput2.current.focus();
      }
    }  
  }

  onChangeParentData(opt, event) {
    const { arrDatos } = this.props.initState
    const { email } = arrDatos

    if(opt === 'titulo')
      email.titulo = event.target.value;

    this.props.initsetState({ arrDatos })
  }

  onAdd() {
    const { arrDatos } = this.props.initState
    const { email } = arrDatos
    const { inputEmail, inputAlias, inputMensaje } = this.state

    if(inputEmail === '' || inputAlias === '' || inputMensaje === '') {
      alert('Datos incompletos')
      return false
    }

    email.email.push({
      email: inputEmail,
      mensaje: inputMensaje,
      titulo: inputAlias,
    })

    this.props.initsetState({ arrDatos })
    this.setState({ inputEmail: '', inputMensaje: '', inputAlias: '', })

    this.checkMarkValues();
  }

  onDeleteEmail(index) {
    let { arrDatos } = this.props.initState
    let { email } = arrDatos
    email.email.splice(index, 1);
    this.props.initsetState({ arrDatos })
  }

  onEditEmail(index){
    if(this.state.editEmailStatus==false){
      this.state.indexInput = index
      this.setState({ editEmailStatus: true })
    }else{
      this.setState({ editEmailStatus: false })
    }
  }

  checkMarkValues(){
    const { arrDatos,arrCheck } = this.props.initState
    const { email,telefono,whatsapp } = arrDatos

    if(email.email.length > 0 && telefono.telefono.length > 0 && whatsapp.whatsapp.length > 0){
      arrCheck[4].checkMark = true;
    }else{
      arrCheck[4].checkMark = false;
    }
  }

  makeList(item, index) {
    const { arrDatos } = this.props.initState
    const { email } = arrDatos
    return (
      <div className={'datosContacto__listRegistredEmail'} key={`email_id_${index}`}>
        <Row>
          <Col>
            {
              ( this.state.editEmailStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginBottom:10,marginTop:10}} type="text" onChange={(event) => { email.email[index]['titulo'] = event.target.value; this.props.initsetState({ arrDatos }); }} value={item.titulo}  /> : <p className={'__titulo'}>{item.titulo}</p>)  
            }
          </Col>
        </Row>
        <Row className={'z-depth-1'} style={{ margin: 0, padding: 0, borderBottom: 0, }}>
          <Col xs={8} style={{ background: '#c3c3c3' }}>
            {
              ( this.state.editEmailStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginTop:5}} type="text" onChange={(event) => { email.email[index]['email'] = event.target.value; this.props.initsetState({ arrDatos }); }} value={item.email}  /> : <p className={'__email'}>{item.email}</p>)  
            }
            {
              ( this.state.editEmailStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginTop:5}} type="text" onChange={(event) => { email.email[index]['mensaje'] = event.target.value; this.props.initsetState({ arrDatos }); }} value={item.mensaje}  /> : <p className={'__mensaje'}>{item.mensaje}</p>)  
            }
          </Col>
          <Col xs={4} style={{ background: '#fff', }}>
            <Row>
              <Col>
                <img 
                alt={'Imagen'} 
                style={{ width: 40, height: 40, }} 
                src={'img/icons/edit.png'}
                onClick={
                  () => {
                    this.onEditEmail(index)
                  }
                } 
                />
              </Col>
              <Col>
                <img alt={'Imagen'}
                  onClick={ () => { this.onDeleteEmail(index) } }
                  style={{ width: 40, height: 40, }} src={'img/icons/trash.png'} />
              </Col>
            </Row>
          </Col>
        </Row>
      </div>
    )
  }

  render() {
    const { arrDatos } = this.props.initState
    const { email } = arrDatos
    const { inputEmail, inputAlias, inputMensaje } = this.state


    return (
      <div style={{ padding: 15, background: '#f3f3f3', }}>
        { /* Correo */ }
        <Row>
          <Col xs={1}>
            <img alt={'Imagen'} style={{ height: 40, width: 40, }} src={'img/icons/m-mail.png'} />
          </Col>
          <Col>
            <p style={{ fontSize: 18, }}>Correo electrónico</p>
          </Col>
        </Row>
        
        <hr style={{ margin: '10px', marginBottom: '20px', }} />

        <div style={{ width: '90%', margin: '10px auto', }}>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Leyenda del Botón</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.onChangeParentData('titulo', event) } }
              type={'text'} placeholder={ 'Ejemplo: Escríbeme' } value={email.titulo} />
          </Row>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Alias</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.setState({ inputAlias: event.target.value }) } }
              type={'text'} placeholder={ 'Ejemplo: Oficina' } value={ inputAlias } 
              ref={this.textInput1}
            />
          </Row>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Mensaje</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.setState({ inputMensaje: event.target.value }) } }
              type={'email'} placeholder={ 'Ejemplo: Hola ¿Podrías dar más información?' } value={ inputMensaje } />
          </Row>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Dirección de correo electrónico <b>*</b></p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.setState({ inputEmail: event.target.value }) } }
              type={'text'} placeholder={ 'Ejemplo: usuario@correo.com' } value={ inputEmail } 
              ref={this.textInput2}
            />
          </Row>

          <Row>
            <p
              className={'btn btn-primary z-depth-2 disenoPage__btnUpload__remove'}
              onClick={ () => { this.onAdd() } }
            >Agregar correo</p>
          </Row>

          {
            email.email.length > 0 ? (
              <div style={{ marginTop: 20, }}>
                { email.email.map((item, index) => this.makeList(item, index)) }
              </div>
            ) : null
          }

        </div>

        <hr style={{ margin: '10px', marginBottom: '20px', }} />

      </div>
    );
  }

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

};

export default withRouter(EmailPage)