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

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

  }

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

  }

  onChangeParentData(opt, value) {
    const { arrDatos,arrCheck } = this.props.initState
    const { descripcion } = arrDatos

    if(opt === 'nombre') {
      descripcion.nombre = value
    } else if(opt === 'cargo') {
      descripcion.cargo = value
    } else if(opt === 'empresa') {
      descripcion.empresa = value
    } else if(opt === 'slogan') {
      descripcion.slogan = value
    }

    this.props.initsetState({ arrDatos,arrCheck })

    if(descripcion.nombre!=='' && descripcion.cargo!=='' && descripcion.empresa!==''){
      arrCheck[2].checkMark = true;
    }else{
      arrCheck[2].checkMark = false;
    }

  }

  render() {
    const { arrDatos } = this.props.initState
    const { descripcion } = arrDatos
    const { nombre, cargo, empresa, slogan } = descripcion

    return (
      <div style={{ padding: 15, background: '#f3f3f3', }}>
        
        <div style={{ width: '90%', margin: '10px auto', }}>
          
          <Row>
            <p className={'datosContacto__leyendForm'}>Nombre</p>
          </Row>
          <Row style={{ marginBottom: 30, }}>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.onChangeParentData('nombre', event.target.value) } }
              type={'text'} placeholder={ 'Ingresa tu nombre' } value={ nombre } 
              ref={this.textInputNombre}
            />
          </Row>
          <Row>
            <p className={'datosContacto__leyendForm'}>Cargo</p>
          </Row>
          <Row style={{ marginBottom: 30, }}>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.onChangeParentData( 'cargo', event.target.value ) } }
              type={'text'} placeholder={ 'Dirección' } value={ cargo } />
          </Row>
          <Row>
            <p className={'datosContacto__leyendForm'}>Empresa</p>
          </Row>
          <Row style={{ marginBottom: 30, }}>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.onChangeParentData( 'empresa', event.target.value ) } }
              tabIndex="0"
              type={'text'} placeholder={ 'W Soft SA De CV' } value={ empresa }  />
          </Row>
          <Row>
            <p className={'datosContacto__leyendForm'}>Slogan </p>
          </Row>
          <Row style={{ marginBottom: 30, }}>
            <input
              className={'datosContacto__inputForm z-depth-1'}
              onChange={ (event) => { this.onChangeParentData( 'slogan', event.target.value ) } }
              type={'text'} placeholder={ '"No imprimas, impresiona"' } value={ slogan } />
          </Row>
        </div>

      </div>
    );
  }

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

};

export default withRouter(IntroduccionPage)