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

class WhatsappPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputTel: '',
      inputAlias: '',
      inputMensaje: 'Hola ¿Me podrías dar mas información?',      
      editWhatsappStatus: false,
      indexInput: 0
    }

  }

  componentDidMount() {  }

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

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

    this.props.initsetState({ arrDatos })
  }

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

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

    whatsapp.whatsapp.push({
      whatsapp: inputTel,
      titulo: inputAlias,
      mensaje: inputMensaje,
    })

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

    this.checkMarkValues();
  }

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

  onEditWhatsapp(index){
    if(this.state.editWhatsappStatus==false){
      this.state.indexInput = index
      this.setState({ editWhatsappStatus: true })
    }else{
      this.setState({ editWhatsappStatus: 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 { whatsapp } = arrDatos
    return (
      <div className={'datosContacto__listRegistredEmail'} key={`email_id_${index}`} style={{paddingBottom:10}}>
        <Row>
          <Col>
            {
              ( this.state.editWhatsappStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginBottom:10,marginTop:10}} type="text" onChange={(event) => { whatsapp.whatsapp[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.editWhatsappStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginTop:5}} type="text" onChange={(event) => { whatsapp.whatsapp[index]['whatsapp'] = event.target.value; this.props.initsetState({ arrDatos }); }} value={item.whatsapp}  /> : <p className={'__email'}>{item.whatsapp}</p>)  
            }
  
            {
              ( this.state.editWhatsappStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginTop:5}} type="text" onChange={(event) => { whatsapp.whatsapp[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.onEditWhatsapp(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 { whatsapp } = arrDatos
    const { inputTel, 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-whatsapp.png'} />
          </Col>
          <Col>
            <p style={{ fontSize: 18, }}>Whatsapp</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: ¡Llámame!' } value={whatsapp.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: Ventas' } value={ inputAlias } />
          </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={'text'} placeholder={ 'Ejemplo: Hola ¿Me podrías dar mas información?' } value={ inputMensaje } />
          </Row>
          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Número de teléfono <b>*</b></p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ 
                (event) => { 
                  this.validatePhone(event)
                } 
              }
              type={'text'} placeholder={ 'Ejemplo: (333) 123 - 24 - 56' } value={ inputTel } />
          </Row>

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

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

        </div>

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

      </div>
    );
  }

  validatePhone(event){
		const val = event.target.value;
		let content = [];
		Array.from(val).map(letter=>{
			if (/\D/g.test(letter)) letter = letter.replace(/\D/g, '');
			if(!isNaN(letter)) {
				content.push(letter);
			}
		});
		let string = content.join("");
    this.setState({
      inputTel: string.trim()
    })
  }

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

};

export default withRouter(WhatsappPage)