import React, {Component} from 'react';
import { Row } from 'react-bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
import './RedesSociales.css';

const RedesSociales = ({state,initsetState,onChangeParentData}) => {
  const {arrRedesSociales,arrDatos,iconVersion,showSocialNetworks} = state;
  console.log(arrDatos.facebook.checked);
  return(
    <>
      {
      showSocialNetworks===true ? 
      <>
      <p style={{fontSize:'1rem',color:'#606060'}}>Agrega tus redes sociales a tu tarjeta dando click en el icono correspondiente</p>
      <div className="ws_box_socialnetworks"> 

       <img src={`img/icons/${iconVersion}/web.svg`} alt="icon_website" title="Website" 
        onClick={(e) => { showInputSocial(`site`)}} />

        <img src={`img/icons/${iconVersion}/facebook.svg`} alt="icon_facebook" title="Facebook" 
        onClick={(e) => { showInputSocial('facebook')}}
        />

        <img src={`img/icons/${iconVersion}/twitter.svg`} alt="icon_twitter" title="Twitter" 
        onClick={(e) => { showInputSocial('twitter')}}/>

        <img src={`img/icons/${iconVersion}/ig.svg`} alt="icon_instagram" title="Instagram" 
        onClick={(e) => { showInputSocial('instagram')}} />

        <img src={`img/icons/${iconVersion}/youtube.svg`} alt="icon_youtube" title="Youtube" 
        onClick={(e) => { showInputSocial(`youtube`)}} />
        
        <img src={`img/icons/${iconVersion}/zoom.svg`} alt="icon_zoom" title="Zoom" 
        onClick={ (e) => { showInputSocial(`zoom`) } } />

        <img src={`img/icons/${iconVersion}/behance.svg`} alt="icon_behance" title="Behance" 
        onClick={ (e) => { showInputSocial(`behance`) }} />

        <img src={`img/icons/${iconVersion}/blog.svg`} alt="icon_blog" title="Blog" 
        onClick={(e) => { showInputSocial(`blog`)}}/>

        <img src={`img/icons/${iconVersion}/deviantart.svg`} alt="icon_devianart" title="Deviantart" 
        onClick={(e) => { showInputSocial(`deviantart`)}} />

        <img src={`img/icons/${iconVersion}/discord.svg`} alt="icon_discord" title="Discord" 
        onClick={(e) => { showInputSocial(`discord`)}}/>

        <img src={`img/icons/${iconVersion}/dribble.svg`} alt="icon_dribble" title="Dribble" 
        onClick={(e) => { showInputSocial(`dribble`)}}/>

        <img src={`img/icons/${iconVersion}/drive.svg`} alt="icon_drive" title="Drive" 
        onClick={(e) => { showInputSocial(`drive`)}} />

        <img src={`img/icons/${iconVersion}/dropbox.svg`} alt="icon_dropbox" title="Dropbox" 
        onClick={(e) => { showInputSocial(`dropbox`)}} />

        <img src={`img/icons/${iconVersion}/feed.svg`} alt="icon_feed" title="Feed" 
        onClick={(e) => { showInputSocial(`feed`)}} />

        <img src={`img/icons/${iconVersion}/flickr.svg`} alt="icon_flickr" title="Flickr" 
        onClick={(e) => { showInputSocial(`flickr`)}} />

        <img src={`img/icons/${iconVersion}/foursquare.svg`} alt="icon_foursquare" title="Foursquare" 
        onClick={(e) => { showInputSocial(`foursquare`)}} />

        <img src={`img/icons/${iconVersion}/github.svg`} alt="icon_github" title="Github" 
        onClick={(e) => { showInputSocial(`github`)}} />

        <img src={`img/icons/${iconVersion}/hangouts.svg`} alt="icon_hangout" title="Hangouts" 
        onClick={(e) => { showInputSocial(`hangout`)}} />

        <img src={`img/icons/${iconVersion}/id.svg`} alt="icon_tarjetaid" title="Tarjeta.id" 
        onClick={(e) => { showInputSocial(`tarjetaid`)}} />

        <img src={`img/icons/${iconVersion}/kickstart.svg`} alt="icon_kickstart" title="Kickstart" 
        onClick={(e) => { showInputSocial(`kickstart`)}} />

        <img src={`img/icons/${iconVersion}/linkedin.svg`} alt="icon_linkedin" title="Linkedin" 
        onClick={(e) => { showInputSocial(`linkedin`)}} />

        <img src={`img/icons/${iconVersion}/messenger.svg`} alt="icon_messenger" title="Messenger" 
        onClick={(e) => { showInputSocial(`messenger`)}} />

        <img src={`img/icons/${iconVersion}/photos.svg`} alt="icon_photos" title="Photos" 
        onClick={(e) => { showInputSocial(`photos`)}} />

        <img src={`img/icons/${iconVersion}/pinterest.svg`} alt="icon_pinterest" title="Pinterest" 
        onClick={(e) => { showInputSocial(`pinterest`)}} />

        <img src={`img/icons/${iconVersion}/reddit.svg`} alt="icon_reddit" title="Reddit" 
        onClick={(e) => { showInputSocial(`reddit`)}} />

        <img src={`img/icons/${iconVersion}/snapchat.svg`} alt="icon_snapchat" title="Snapchat" 
        onClick={(e) => { showInputSocial(`snapchat`)}} />

        <img src={`img/icons/${iconVersion}/soundcloud.svg`} alt="icon_soundcloud" title="Soundcloud" 
        onClick={(e) => { showInputSocial(`soundcloud`)}} />

        <img src={`img/icons/${iconVersion}/spotify.svg`} alt="icon_spotify" title="Spotify" 
        onClick={(e) => { showInputSocial(`spotify`)}} />

        <img src={`img/icons/${iconVersion}/tiktok.svg`} alt="icon_tiktok" title="Tiktok" 
        onClick={(e) => { showInputSocial(`tiktok`)}} />

        <img src={`img/icons/${iconVersion}/tumblr.svg`} alt="icon_tumblr" title="Tumblr" 
        onClick={(e) => { showInputSocial(`tumblr`)}} />

        <img src={`img/icons/${iconVersion}/twitch.svg`} alt="icon_twitch" title="Twitch" 
        onClick={(e) => { showInputSocial(`twitch`)}} />

        <img src={`img/icons/${iconVersion}/vimeo.svg`} alt="icon_vimeo" title="Vimeo" 
        onClick={(e) => { showInputSocial(`vimeo`)}} />
      </div>
      </>
      :
      null
      }

      <div className="ws_boxcontainer_redes mb-5" id="ws_boxcontainer_redes"> 
          {
          arrDatos.site.checked===true ? 
          <>
          <Row> <p className={'datosContacto__leyendForm'}>Sitio Web</p> </Row>
          <Row style={{position:'relative',marginBottom: 15}}>
            <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Facebook' } 
            onChange={ (event) => { onChangeParentData('site', event.target.value) }}
            value={ arrDatos.site.url }
            />
            <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
            onClick={
              (e) => {
                arrDatos.site.checked = false
                // arrDatos.site.view = false
                arrDatos.site.url = ''
                initsetState({
                    arrDatos
                })
              }
            }
            />
          </Row> 
          </>
          : null
        }
        {
          arrDatos.facebook.checked===true ? 
          <>
          <Row> <p className={'datosContacto__leyendForm'}>Facebook</p> </Row>
          <Row style={{position:'relative',marginBottom: 15}}>
            <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Facebook' } 
            onChange={ (event) => { onChangeParentData('facebook', event.target.value) }}
            value={ arrDatos.facebook.url }
            />
            <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
            onClick={
              (e) => {
                arrDatos.facebook.checked = false
                // arrDatos.facebook.view = false
                arrDatos.facebook.url = ''
                initsetState({
                    arrDatos
                })
              }
            }
            />
          </Row> 
          </>
          : null
        }
        {
          arrDatos.twitter.checked===true ? 
          <>
          <Row> <p className={'datosContacto__leyendForm'}>Twitter</p> </Row>
          <Row style={{position:'relative',marginBottom: 15}}>
            <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Twitter' }
            onChange={ (event) => { onChangeParentData('twitter', event.target.value) }}
            value={ arrDatos.twitter.url }
            />
            <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
            onClick={
              (e) => {
                arrDatos.twitter.checked = false
                // arrDatos.twitter.view = false
                arrDatos.twitter.url = ''
                initsetState({
                    arrDatos
                })
              }
            }
            />
          </Row> 
          </>
          : null
        }
        {
          arrDatos.instagram.checked===true ? 
          <>
          <Row> <p className={'datosContacto__leyendForm'}>Instagram</p> </Row>
          <Row style={{position:'relative',marginBottom: 15}}>
            <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Instagram' } 
             onChange={ (event) => { onChangeParentData('instagram', event.target.value) }}
             value={ arrDatos.instagram.url }
            />
            <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
            onClick={
              (e) => {
                arrDatos.instagram.checked = false
                // arrDatos.instagram.view = false
                arrDatos.instagram.url = ''
                initsetState({
                    arrDatos
                })
              }
            }
            />
          </Row> 
          </>
          : null
        }
        {
          arrDatos.youtube.checked===true ? 
          <>
          <Row> <p className={'datosContacto__leyendForm'}>Youtube</p> </Row>
          <Row style={{position:'relative',marginBottom: 15}}>
            <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Youtube' } 
            onChange={ (event) => { onChangeParentData('youtube', event.target.value) }}
            value={ arrDatos.youtube.url }
            />
            <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
            onClick={
              (e) => {
                arrDatos.youtube.checked = false
                // arrDatos.youtube.view = false
                arrDatos.youtube.url = ''
                initsetState({
                    arrDatos
                })
              }
            }
            />
          </Row> 
          </>
          : null
        }
        {
          ( arrDatos.hasOwnProperty('zoom') ) ?
            arrDatos.zoom.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Zoom</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Zoom' } 
              onChange={ (event) => { onChangeParentData('zoom', event.target.value) }}
              value={ arrDatos.zoom.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.zoom.checked = false
                  arrDatos.zoom.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          :null
        }
        {
          ( arrDatos.hasOwnProperty('behance') ) ?
            arrDatos.behance.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Behance</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Behance' }
              onChange={ (event) => { onChangeParentData('behance', event.target.value) }}
              value={ arrDatos.behance.url }            
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.behance.checked = false
                  arrDatos.behance.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('blog') ) ?
            arrDatos.blog.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Blog</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Blog' } 
              onChange={ (event) => { onChangeParentData('blog', event.target.value) }}
              value={ arrDatos.blog.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.blog.checked = false
                  arrDatos.blog.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('deviantart') ) ?
            arrDatos.deviantart.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Deviantart</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Deviantart' } 
              onChange={ (event) => { onChangeParentData('deviantart', event.target.value) }}
              value={ arrDatos.deviantart.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.deviantart.checked = false
                  arrDatos.deviantart.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
           ( arrDatos.hasOwnProperty('discord') ) ?
            arrDatos.discord.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Discord</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Discord' } 
              onChange={ (event) => { onChangeParentData('discord', event.target.value) }}
              value={ arrDatos.discord.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.discord.checked = false
                  arrDatos.discord.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('dribble') ) ?
            arrDatos.dribble.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Dribble</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Dribble' } 
              onChange={ (event) => { onChangeParentData('dribble', event.target.value) }}
              value={ arrDatos.dribble.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.dribble.checked = false
                  arrDatos.dribble.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('drive') ) ?
            arrDatos.drive.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Drive</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Drive' } 
              onChange={ (event) => { onChangeParentData('drive', event.target.value) }}
              value={ arrDatos.drive.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.drive.checked = false
                  arrDatos.drive.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          :null
        }
        {
          ( arrDatos.hasOwnProperty('dropbox') ) ?
            arrDatos.dropbox.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Dropbox</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Dropbox' } 
              onChange={ (event) => { onChangeParentData('dropbox', event.target.value) }}
              value={ arrDatos.dropbox.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.dropbox.checked = false
                  arrDatos.dropbox.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('feed') ) ?
            arrDatos.feed.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Feed</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Feed' } 
              onChange={ (event) => { onChangeParentData('feed', event.target.value) }}
              value={ arrDatos.feed.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.feed.checked = false
                  // arrDatos.feed.view = false
                  arrDatos.feed.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('flickr') ) ?
            arrDatos.flickr.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Flickr</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Flickr' } 
              onChange={ (event) => { onChangeParentData('flickr', event.target.value) }}
              value={ arrDatos.flickr.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.flickr.checked = false
                  // arrDatos.flickr.view = false
                  arrDatos.flickr.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('foursquare') ) ?
            arrDatos.foursquare.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Foursquare</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Foursquare' }
              onChange={ (event) => { onChangeParentData('foursquare', event.target.value) }}
              value={ arrDatos.foursquare.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.foursquare.checked = false
                  // arrDatos.foursquare.view = false
                  arrDatos.foursquare.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('github') ) ?
            arrDatos.github.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Github</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Github' } 
              onChange={ (event) => { onChangeParentData('github', event.target.value) }}
              value={ arrDatos.github.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.github.checked = false
                  // arrDatos.github.view = false
                  arrDatos.github.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('hangout') ) ?
            arrDatos.hangout.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Hangouts</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Hangouts' } 
              onChange={ (event) => { onChangeParentData('hangout', event.target.value) }}
              value={ arrDatos.hangout.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.hangout.checked = false
                  // arrDatos.hangout.view = false
                  arrDatos.hangout.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('tarjetaid') ) ?
            arrDatos.tarjetaid.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Tarjeta.id</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Tarjeta.id' } 
              onChange={ (event) => { onChangeParentData('tarjetaid', event.target.value) }}
              value={ arrDatos.tarjetaid.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.tarjetaid.checked = false
                  // arrDatos.tarjetaid.view = false
                  arrDatos.tarjetaid.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('kickstart') ) ?
            arrDatos.kickstart.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Kickstart</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Kickstart' } 
              onChange={ (event) => { onChangeParentData('kickstart', event.target.value) }}
              value={ arrDatos.kickstart.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.kickstart.checked = false
                  // arrDatos.kickstart.view = false
                  arrDatos.kickstart.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('linkedin') ) ?
            arrDatos.linkedin.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Linkedin</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Linkedin' } 
              onChange={ (event) => { onChangeParentData('linkedin', event.target.value) }}
              value={ arrDatos.linkedin.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.linkedin.checked = false
                  // arrDatos.linkedin.view = false
                  arrDatos.linkedin.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('messenger') ) ?
            arrDatos.messenger.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Messenger</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Messenger' } 
              onChange={ (event) => { onChangeParentData('messenger', event.target.value) }}
              value={ arrDatos.messenger.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.messenger.checked = false
                  // arrDatos.messenger.view = false
                  arrDatos.messenger.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('photos') ) ?
            arrDatos.photos.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Photos</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Photos' } 
              onChange={ (event) => { onChangeParentData('photos', event.target.value) }}
              value={ arrDatos.photos.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.photos.checked = false
                  // arrDatos.photos.view = false
                  arrDatos.photos.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('pinterest') ) ?
            arrDatos.pinterest.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Pinterest</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Pinterest' } 
              onChange={ (event) => { onChangeParentData('pinterest', event.target.value) }}
              value={ arrDatos.pinterest.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.pinterest.checked = false
                  // arrDatos.pinterest.view = false
                  arrDatos.pinterest.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('reddit') ) ?
            arrDatos.reddit.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Reddit</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Reddit' } 
              onChange={ (event) => { onChangeParentData('reddit', event.target.value) }}
              value={ arrDatos.reddit.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.reddit.checked = false
                  // arrDatos.reddit.view = false
                  arrDatos.reddit.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('snapchat') ) ?
            arrDatos.snapchat.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Snapchat</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Snapchat' } 
              onChange={ (event) => { onChangeParentData('snapchat', event.target.value) }}
              value={ arrDatos.snapchat.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.snapchat.checked = false
                  // arrDatos.snapchat.view = false
                  arrDatos.snapchat.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('soundcloud') ) ?
            arrDatos.soundcloud.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Soundcloud</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Soundcloud' } 
              onChange={ (event) => { onChangeParentData('soundcloud', event.target.value) }}
              value={ arrDatos.soundcloud.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.soundcloud.checked = false
                  // arrDatos.soundcloud.view = false
                  arrDatos.soundcloud.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('spotify') ) ?
            arrDatos.spotify.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Spotify</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Spotify' } 
              onChange={ (event) => { onChangeParentData('spotify', event.target.value) }}
              value={ arrDatos.spotify.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.spotify.checked = false
                  // arrDatos.spotify.view = false
                  arrDatos.spotify.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('tiktok') ) ?
            arrDatos.tiktok.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Tiktok</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Tiktok' } 
              onChange={ (event) => { onChangeParentData('tiktok', event.target.value) }}
              value={ arrDatos.tiktok.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.tiktok.checked = false
                  // arrDatos.tiktok.view = false
                  arrDatos.tiktok.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('tumblr') ) ?
            arrDatos.tumblr.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Tumblr</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Tumblr' } 
              onChange={ (event) => { onChangeParentData('tumblr', event.target.value) }}
              value={ arrDatos.tumblr.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.tumblr.checked = false
                  // arrDatos.tumblr.view = false
                  arrDatos.tumblr.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('twitch') ) ?
            arrDatos.twitch.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Twitch</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Twitch' } 
              onChange={ (event) => { onChangeParentData('twitch', event.target.value) }}
              value={ arrDatos.twitch.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.twitch.checked = false
                  // arrDatos.twitch.view = false
                  arrDatos.twitch.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
        {
          ( arrDatos.hasOwnProperty('vimeo') ) ?
            arrDatos.vimeo.checked===true ? 
            <>
            <Row> <p className={'datosContacto__leyendForm'}>Vimeo</p> </Row>
            <Row style={{position:'relative',marginBottom: 15}}>
              <input className={'datosContacto__inputForm z-depth-1'} type={'text'} placeholder={ 'Vimeo' } 
              onChange={ (event) => { onChangeParentData('vimeo', event.target.value) }}
              value={ arrDatos.vimeo.url }
              />
              <img src={'img/icons/eliminate.svg'} alt="eliminate" style={{position:'absolute',top:'0px',right:'5px',width:'32px'}}
              onClick={
                (e) => {
                  arrDatos.vimeo.checked = false
                  // arrDatos.vimeo.view = false
                  arrDatos.vimeo.url = ''
                  initsetState({
                      arrDatos
                  })
                }
              }
              />
            </Row> 
            </>
            : null
          : null
        }
      </div>
    </>
  )

  function showInputSocial(type){
    const {arrRedesSociales,arrDatos} = state;
    var newState = {...state}
    newState.arrDatos.[type] = { checked : true, icon: `${type}`, img : ''};
    initsetState({newState})
  }

}

export default RedesSociales;