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

class IntroduccionPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }

  }

  componentDidMount() {

  }

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

    if(addContact.titulo!=='' && addContact.N !== '' && addContact.TEL!== ''){
      arrCheck[5].checkMark = true;
    }else{
      arrCheck[5].checkMark = false;
    }
  }

  render() {
    const { arrDatos, } = this.props.initState
    const { inputAlias, inputTel, addContact, } = arrDatos

    return (
      <div className={'contactoSidebar__container'} style={{ padding: 15, background: '#f3f3f3', }}>

        <Row>
          <Col xs={1}>
            <img alt={'Imagen'} style={{ height: 40, width: 40, }} src={'img/icons/m-call.png'} />
          </Col>
          <Col>
            <p style={{ fontSize: 18, }}>Mi contacto</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) => { 
                  addContact.titulo = event.target.value; 
                  this.initsetState({ arrDatos });
                  this.checkMarkValues();
                } }
              type={'text'} placeholder={ 'Ejemplo: ¡Agrégame a tus contactos!' } value={addContact.titulo} />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Tu nombre o nombre de tu empresa</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { 
                addContact.N = event.target.value; 
                this.initsetState({ arrDatos });
                this.checkMarkValues();
              } }
              type={'text'} placeholder={ 'Ejemplo: Tarjeta.id Corp.' }
              value={ addContact.N } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Teléfono</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { 
                addContact.TEL = event.target.value; 
                this.initsetState({ arrDatos });
                this.checkMarkValues();
              } }
              type={'text'} placeholder={ 'Ingresa el teléfono de contacto' } value={ addContact.TEL } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Correo electrónico</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { addContact.EMAIL = event.target.value; this.initsetState({ arrDatos }) } }
              type={'text'} placeholder={ 'Ingresa tu correo electrónico' } value={ addContact.EMAIL } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Sitio web</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { addContact.URL = event.target.value; this.initsetState({ arrDatos }) } }
              type={'text'} placeholder={ 'Ingresa tu sitio web' } value={ addContact.URL } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Dirección</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { addContact.ADR_intl = event.target.value; this.initsetState({ arrDatos }) } }
              type={'text'} placeholder={ 'Ingresa tu dirección' } value={ addContact.ADR_intl } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Código postal</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { addContact.ADR_postal = event.target.value; this.initsetState({ arrDatos }) } }
              type={'text'} placeholder={ 'Ingresa tu código postal' } value={ addContact.ADR_postal } />
          </Row>

          <Row className={'datosContacto__cntBox'}>
            <p className={'datosContacto__leyendForm'}>Estado</p>
          </Row>
          <Row>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { addContact.ADR_parcel = event.target.value; this.initsetState({ arrDatos }) } }
              type={'text'} placeholder={ 'Ingresa tu estado' } value={ addContact.ADR_parcel } />
          </Row>

        </div>

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

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

};

export default withRouter(IntroduccionPage)