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

class PhonePage extends Component {
  constructor(props) {
    super(props);
    this.textInputTelefono = React.createRef();
    this.state = {
      inputTel: '',
      inputAlias: '',
      editPhoneStatus: false,
      indexInput: 0
    }

  }

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

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

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

    this.props.initsetState({ arrDatos })
  }

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

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

    telefono.telefono.push({
      telefono: inputTel,
      titulo: inputAlias,
    })

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

    this.checkMarkValues();
  }

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

  onEditPhone(index){
    if(this.state.editPhoneStatus==false){
      this.state.indexInput = index
      this.setState({ editPhoneStatus: true })
    }else{
      this.setState({ editPhoneStatus: 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 { telefono } = arrDatos
    return (
      <div className={'datosContacto__listRegistredEmail'} key={`email_id_${index}`} style={{paddingBottom:10}}>
        <Row>
          <Col>
            {
              ( this.state.editPhoneStatus==true && this.state.indexInput==index ? <input type="text" className="datosContacto__inputForm z-depth-1" style={{marginBottom:10,marginTop:10}} onChange={(event)=>{ telefono.telefono[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.editPhoneStatus==true && this.state.indexInput==index ? <input className="datosContacto__inputForm z-depth-1" style={{marginTop:5}} type="text" onChange={(event) => { telefono.telefono[index]['telefono'] = event.target.value; this.props.initsetState({ arrDatos }); }} value={item.telefono}  /> : <p className={'__email'}>{item.telefono}</p>)  
            }
            <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.onEditPhone(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 { telefono } = arrDatos
    const { inputTel, inputAlias } = 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-call.png'} />
          </Col>
          <Col>
            <p style={{ fontSize: 18, }}>Teléfono</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={telefono.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'}>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 } 
              ref={this.textInputTelefono}
            />
          </Row>

          <Row>
            <p
              className={'btn btn-primary z-depth-2 disenoPage__btnUpload__remove'}
              onClick={ () => { this.onAdd();  } }
              style={{backgroundColor:"#ff0350 !important;",color:"#fff"}}
            >Agregar teléfono</p>
          </Row>

          {
            telefono.telefono.length > 0 ? (
              <div style={{ marginTop: 20, }}>
                { telefono.telefono.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(PhonePage)