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

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

  }

  componentDidMount() {

  }
  onChangeParentData(opt, value) {

    const { arrDatos } = this.props.initState
    const { ubicacion } = arrDatos

    if(opt === 'direccion') {
      ubicacion.direccion = value
    } else if(opt === 'ciudad') {
      ubicacion.ciudad = value
    } else if(opt === 'codigoPostal') {
      ubicacion.codigoPostal = value
    } else if(opt === 'estado') {
      ubicacion.estado = value
    }

    this.props.initsetState({ arrDatos })
  }

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

    if(ubicacion.direccion!='' && ubicacion.ciudad!='' && ubicacion.codigoPostal!='' && ubicacion.estado!=''){
      arrCheck[8].checkMark = true;
    }else{
      arrCheck[8].checkMark = false;
    }
  }

  render() {

    const { arrDatos } = this.props.initState
    const { ubicacion } = arrDatos
    const { direccion, ciudad, codigoPostal, estado,checked } = ubicacion
    
    return (
      <div className={'contactoSidebar__container'} style={{ padding: 15, background: '#f3f3f3', }}>
    { /*<div className={'carreteSidebar__btnFloat'}></div>*/ }

        <div style={{ padding: 15, background: '#f3f3f3', }}>

          <div style={{ width: '90%', margin: '10px auto', }}>

          <Row style={{ marginBottom: 30, }}>
              <Container style={{display:'flex',flexDirection:'row',alignContent:'center',alignItems:'center'}}>
                <input type={"checkbox"} className="" id="checkUbicacion"
                checked={ checked }
                onChange={
                  (e) => {
                    const check = this.props.initState.arrDatos.ubicacion.checked = !checked;
                    this.props.initsetState({
                      check
                    })
                  }
                }
                />
                <label className="form-check-label" htmlFor="checkUbicacion" style={{color:'#555',paddingLeft:"10px",cursor:'pointer'}}>Mostrar/Ocultar</label>
              </Container>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Dirección <span style={{color:'red'}}>*</span></p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { 
                  this.onChangeParentData('direccion', event.target.value);
                  this.checkMarkValues();
                }}
                type={'text'} 
                placeholder={ 'Dirección' } 
                value={ direccion }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Ciudad <span style={{color:'red'}}>*</span></p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { 
                  this.onChangeParentData('ciudad', event.target.value);
                  this.checkMarkValues(); 
                }}
                type={'text'} placeholder={ 'Ciudad' } value={ ciudad }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Código Postal <span style={{color:'red'}}>*</span></p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { 
                  this.onChangeParentData('codigoPostal', event.target.value);
                  this.checkMarkValues();
                }}
                type={'text'} placeholder={ 'Código Postal' } value={ codigoPostal } />
            </Row>

             <Row> <p className={'datosContacto__leyendForm'}>Estado <span style={{color:'red'}}>*</span></p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { 
                  this.onChangeParentData('estado', event.target.value);
                  this.checkMarkValues(); 
                }}
                type={'text'} placeholder={ 'Estado' }  value={ estado }/>
            </Row>

          </div>

        </div>

      </div>
    );
  }

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

};

export default withRouter(IntroduccionPage)