import React, { Component, version } from "react";
import { withRouter, } from "react-router-dom";
import { Row, } from 'react-bootstrap'
import RedesSociales from "../../componentes/RedesSociales";

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

  }

  componentDidMount() {

  }

  onChangeParentData(opt, value) {
    const { arrDatos, } = this.props.initState
    const { facebook, instagram, linkedin, youtube, twitter, site,zoom,behance,blog,deviantart,discord,dribble,drive,dropbox,feed,flickr,foursquare,github,hangout,tarjetaid,kickstart,messenger,photos,pinterest,reddit,snapchat,soundcloud,spotify,tiktok,tumblr,twitch,vimeo } = arrDatos
    value = value.trim()

    eval(opt).url = value
    // eval(opt).checked = ( value != '' ? true : false )
    this.props.initsetState({ arrDatos });
    this.checkMarkValues();
  }

  checkMarkValues(){
    const { arrDatos,arrCheck } = this.props.initState
    const { facebook,instagram,linkedin,youtube,twitter,site,zoom,behance,blog,deviantart,discord,dribble,drive,dropbox,feed,flickr,foursquare,github,hangout,tarjetaid,kickstart,messenger,photos,pinterest,reddit,snapchat,soundcloud,spotify,tiktok,tumblr,twitch,vimeo } = arrDatos

    if(facebook.url!=''){
      arrCheck[9].checkMark = true;
    }else{
      arrCheck[9].checkMark = false;
    }
  }

  render() {

    const { arrDatos,showSocialNetworks } = this.props.initState
    let {iconVersion} = this.props.initState;
    const { facebook,instagram,linkedin,youtube,twitter,site } = arrDatos
    
    return (
      <div className={'contactoSidebar__container'} style={{ padding: 15, background: '#f3f3f3', }}>

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


          <form>  
            <div className="form-group mb-2">
              <label>Elige un paquete de iconos</label>
              <select class="form-control"
              onChange={
                (e) => {
                  iconVersion = e.target.value;
                  this.initsetState({
                    iconVersion
                  })
                }
              }
              >  
                <option value="v1" selected={(iconVersion === 'v1') ? true : false }>Paquete 1</option>
                <option value="v2" selected={(iconVersion === 'v2') ? true : false }>Paquete 2</option>
                <option value="v3" selected={(iconVersion === 'v3') ? true : false }>Paquete 3</option>
                <option value="v4" selected={(iconVersion === 'v4') ? true : false }>Paquete 4</option>
              </select>
            </div>
          </form>

          <button className="btn btn-primary z-depth-2 disenoPage__btnUpload__remove mb-3"
            onClick={
              (e) => {
                this.initsetState({
                  showSocialNetworks: !showSocialNetworks
                })
              }
            }
          >{ showSocialNetworks ? '- Ocultar iconos' : '+ Mostrar iconos' }</button>
          
  
          <RedesSociales state={this.props.initState} initsetState={this.initsetState.bind(this)} onChangeParentData={this.onChangeParentData.bind(this)} />


          <div style={{ width: '90%', margin: '10px auto', }}>
            
            {/* <Row> <p className={'datosContacto__leyendForm'}>Facebook</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('facebook', event.target.value) }}
                type={'text'} placeholder={ 'Facebook' }  value={ facebook.url }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Instagram</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('instagram', event.target.value) }}
                type={'text'} placeholder={ 'Instagram' } value={ instagram.url }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Linkedin</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('linkedin', event.target.value) }}
                type={'text'} placeholder={ 'Linkedin' }  value={ linkedin.url }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Youtube</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('youtube', event.target.value) }}
                type={'text'} placeholder={ 'Youtube' }  value={ youtube.url }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Twitter</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('twitter', event.target.value) }}
                type={'text'} placeholder={ 'Twitter' }  value={ twitter.url }/>
            </Row>

            <Row> <p className={'datosContacto__leyendForm'}>Sitio Web</p> </Row>
            <Row style={{ marginBottom: 15, }}>
              <input className={'datosContacto__inputForm z-depth-1'}
                onChange={ (event) => { this.onChangeParentData('site', event.target.value) }}
                type={'text'} placeholder={ 'Sitio Web' }  value={ site.url }/>
            </Row> */}

          </div>

        </div>

      </div>
    );
  }

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

};

export default withRouter(IntroduccionPage)