import React, { Component } from "react";
import "./preview.css";
import { withRouter, } from "react-router-dom";
import { CarouselItem, Container, OverlayTrigger, Tooltip, } from 'react-bootstrap'
import Carousel from 'react-bootstrap/Carousel'
import ReactPlayer from 'react-player';
import ModalsPreviewPage from "./modals.preview.page";
import IconZoom from "./IconZoom";
import IconCall from "./IconCall";
import IconWhatsapp from "./IconWhatsapp";
import IconMail from "./IconMail";
import IconFacebook from "./IconFacebook";
import IconTwitter from "./IconTwitter";
import IconInstagram from "./IconInstagram";
import IconYoutube from "./IconYoutube";
import IconLinkedin from "./IconLinkedin";
import IconWebsite from "./IconWebsite";
import IconBehance from "./IconBehance";
import IconBlog from "./IconBlog";
import IconDeviantart from "./IconDeviantart";
import IconDiscord from "./IconDiscord";
import IconDribble from "./IconDribble";
import IconDrive from "./IconDrive";
import IconDropbox from "./IconDropbox";
import IconFeed from "./IconFeed";
import IconFlickr from "./IconFlickr";
import IconFoursquare from "./IconFoursquare";
import IconGithub from "./IconGithub";
import IconHangout from "./IconHangout";
import IconKickstart from "./IconKickstart";
import IconMessenger from "./IconMessenger";
import IconPhotos from "./IconPhotos";
import IconPinterest from "./IconPinterest";
import IconReddit from "./IconReddit";
import IconSnapchat from "./IconSnapchat";
import IconSoundcloud from "./IconSoundcloud";
import IconSpotify from "./IconSpotify";
import IconTarjetaid from "./IconTarjetaid";
import IconTiktok from "./IconTiktok";
import IconTumblr from "./IconTumblr";
import IconTwitch from "./IconTwitch";
import IconVimeo from "./IconVimeo";
import IconShare from "./IconShare";
import IconWeb from "./IconWeb";

const renderTooltipUrl = (props) => (
  <Tooltip id="button-tooltip" {...props}>
    Haz click para abrir este enlace
  </Tooltip>
);

class PreviewPage extends Component {
  constructor(props) {
    super(props);

    this.refCarousel = React.createRef();
    this.refDocumentos = React.createRef();

    this.state = {
     isOpenModal: false,
     titleModal : '',
     typeArr: ''
    }
  }

  componentDidMount() {
  }

  makeStyle(){
    const { arrDatos, primaryColor } = this.props.initState
    const { diseno } = arrDatos

    if(diseno.portada != '') {
      var styleBackground = {
        backgroundImage:"url("+diseno.portada+")",
        backgroundPosition:"50% 0%",
        backgroundSize:"cover",
        backgroundRepeat:"no-repeat",
        height:220,
        width:'100%'
      }
    }else{
      var styleBackground = {
        backgroundColor:primaryColor,
        height:220,
        width:'100%'
      }
    }

    return styleBackground;
}

  makeViewCoverPage() {
    const { arrDatos, primaryColor } = this.props.initState
    const { diseno } = arrDatos
    if(diseno.coverPage === 1) {
      return (
        <div style={{position: 'relative' }}>
          <img src={diseno.logo} style={{position:'absolute', top:0,width:"auto",height:'auto',maxWidth:"200px",maxHeight:"90px",left:'0',right:'0',bottom:150,margin:'auto',objectFit:'contain'}}/>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
            <defs>
              <pattern id="image" patternUnits="userSpaceOnUse" height="400px" width="800px" >
                <image x="0" y="0" height="400px" width="800px" href={diseno.portada} style={{width:'100%',height:'100%'}} preserveAspectRatio="xMinYMin slice"></image>
              </pattern>
            </defs>
            <title>portada</title><g id="Layer_1" data-name="Layer 1">
              {
                diseno.portada == '' ? <path fill={primaryColor} d="M802.86-1.51H2.86c0,219.27,179.09,400,400,400S802.86,217.76,802.86-1.51Z"/>
                : null
              }
              <path fill="url(#image)" d="M802.86-1.51H2.86c0,219.27,179.09,400,400,400S802.86,217.76,802.86-1.51Z"/><g style={{ opacity : '0.2'}}><path style={{fill:'#fff'}} d="M402.86,338.49c-200.39,0-366.36-148.71-395.47-340H2.86c0,219.27,179.09,400,400,400s400-180.73,400-400h-4.53C769.22,189.78,603.25,338.49,402.86,338.49Z"/></g><path style={{fill:'none',stroke:'#fff',strokeMiterlimit:'10',strokeWidth:'2px'}} d="M402.86,338.49c-200.39,0-366.36-148.71-395.47-340H2.86c0,219.27,179.09,400,400,400s400-180.73,400-400h-4.53C769.22,189.78,603.25,338.49,402.86,338.49Z"/></g>
          </svg>
          <div style={{ textAlign: 'center', width: '100%', position: 'absolute', left: 0, bottom: 10, }}>
            <img alt={'Imagen'} className={'z-depth-3-not-border previewPage__perfil'} src={ diseno.perfil } />
          </div>
        </div>
      )
    } else if(diseno.coverPage === 2) {
      return (
        <div style={{position: 'relative', height:260}}>
          <img src={diseno.logo} style={{position:'absolute', top:0,width:"auto",height:'auto',maxWidth:"200px",maxHeight:"90px",left:'0',right:'0',bottom:150,margin:'auto',objectFit:'contain'}}/>
          <div style={this.makeStyle()}>
            <div style={{ textAlign: 'center', width: '100%', position: 'absolute', left: 0, bottom: 10, }}>
              <img alt={'Imagen'} className={'z-depth-3-not-border previewPage__perfil'} src={ diseno.perfil } />
            </div>
          </div>
        </div>
      )
    } else if(diseno.coverPage === 3) {
      return (
        <div style={{position: 'relative', height:260,}}>
          <img src={diseno.logo} style={{position:'absolute', top:0,width:"auto",height:'auto',maxWidth:"200px",maxHeight:"90px",left:'0',right:'0',bottom:150,margin:'auto',objectFit:'contain'}}/>
          <div style={this.makeStyle()}>
            <div style={{ textAlign: 'left', width: '100%', position: 'absolute', left: 60, bottom: 10, }}>
              <img alt={'Imagen'} className={'z-depth-3-not-border previewPage__perfil-square'} src={ diseno.perfil } />
            </div>
          </div>
        </div>
      )
    }
  }

  render() {
    const { width, height, arrDatos, primaryColor, secundaryColor, viewMenu, } = this.props.initState
    const { descripcion, promo, ubicacion,diseno } = arrDatos
    const { nombre, cargo, empresa, slogan } = descripcion
    const { facebook, instagram,linkedin,youtube,twitter,site } =  arrDatos
    
    const viewFacebook  = (facebook.checked) ? 'block' : 'none' ;
    const viewInstagram  = (instagram.checked) ? 'block' : 'none' ;
    const viewLinkedin  = (linkedin.checked) ? 'block' : 'none' ;
    const viewYoutube  = (youtube.checked) ? 'block' : 'none' ;
    const viewTwitter  = (twitter.checked) ? 'block' : 'none' ;
    const viewSite  = (site.checked) ? 'block' : 'none' ;

    let overflowType = width > 900 ? 'auto' : ( !viewMenu ? 'auto' : 'hidden' )

    return (

      <div className="grid-cell grid-cell-sidebar" style={{ height: `calc(${height}px - 60px)`, overflow: overflowType, paddingTop: 20, }} >
        { /* Preview section */ }
        <div id={'ws_preview_container'} style={{overflowX: 'hidden', background: '#fff', margin: '0 auto', }}>

          { /* Cover */
            this.makeViewCoverPage()
          }

          { /* Datos */
            this.makeViewDatos()
          }
          

          { /* Descripcion promo */
            (this.props.initState.arrDatos.promo.checked) ? 
            this.makeViewDescripcion()
            : 
            <></>
          }

          { /* Datos de Contacto */
            this.makeViewContacto()
          }
          

          { /* Slider carousel */
            this.makeViewCarousel()
          }

          { /* Slider Opiniones */
            this.makeViewOpiniones()
          }

          {  /*Mapa Visítame*/
            this.makeViewVisitame()
          }

          { /* Documentos */
            this.makeViewDocumentos()
          }

          { /* Redes Sociales */
            this.makeViewRedesSociales()
          }

          { /* Compartir y Código QR */
            this.makeViewShareQR()
          }

           { /* Footer */
            this.makeViewFooter()
           }

          <ModalsPreviewPage addTarjeta={() => { this.props.addTarjeta() }} previewState={ this.state } previewSetState={ (param) => this.setState(param) } initState={ this.props.initState } initsetState={ (param) => this.props.initsetState(param) } />

        </div>
      </div>
    )
  }

  makeViewDatos() {
    const { primaryColor, secundaryColor, arrDatos,checkedSecundaryColor } = this.props.initState
    const { descripcion, } = arrDatos
    const { nombre, cargo, empresa, slogan } = descripcion


    return (
      <div className={'mt-3'}>
        <p className={'ws-contact-info-name'} style={{ fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"', marginTop: 0, }}>{ nombre.trim() === '' ? 'Nombre' : nombre }</p>
        <p className={'ws-contact-info-job'} style={{fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>{ cargo.trim() === '' ? 'Puesto / actividad' : cargo }</p>
        <p className={'ws-contact-info-project'} style={{color: primaryColor,fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}>{ empresa.trim() === '' ? 'Empresa' : empresa }</p>
        <p className={'ws-contact-info-job'} style={{fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>{ slogan.trim() === '' ? '' : slogan }</p>
      </div>
    )
  }

  makeViewDescripcion() {
    const { primaryColor, arrDatos, } = this.props.initState
    const { promo, } = arrDatos

    let showVideo = (promo.video!='' ? 'block' : 'none' )

    if(promo.checked) {
      return (
        <div className="ws-portfolio-promo" style={{ background: primaryColor }} >
          <div className="container" style={{width:'85%'}}>
            <h2 className="ws-general-title" style={{ color: '#ffffff', fontSize: '1.5rem', padding: '0px',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',textAlign:'left' }} >
              {promo.titulo === '' ? 'Título del video' : promo.titulo}
            </h2>
            <div style={{whiteSpace:'pre-line'}}>
              <p style={{fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',fontSize:'1rem',textAlign:'justify'}}>
                {promo.descripcion === '' ? `` : promo.descripcion}
              </p>
            </div>

            <div className="ws-portfolio-promo-video" style={{display: showVideo,height:'100%'}}>
              {<ReactPlayer width="100%" height="100%" url={promo.video} />}
            </div>
          </div>
        </div>
      )
    }
    return null
  }

  makeShadowColor(hex) {
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
      c= hex.substring(1).split('');
      if(c.length== 3){
        c= [c[0], c[0], c[1], c[1], c[2], c[2]];
      }
      c= '0x'+c.join('');
      return {boxShadow: '0 0 0 0 ' + 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',0.7)'}
    }
    // throw new Error('Bad Hex');
    return {boxShadow: '0 0 0 0 rgba(226, 10, 79, 0.7)'}
  }

  makeViewContacto() {
    const { primaryColor, arrDatos,secundaryColor,checkedSecundaryColor } = this.props.initState
    let { telefono, whatsapp, email, addContact, } = arrDatos

    return (
      <div className="ws-contact-myinfo" style={{marginBottom:'25px'}}>
        <div className="row ws-contact-numbers" style={{ cursor: 'pointer' }}> 
          <div className="col-3">
            <div className="btn-pulse" style={this.makeShadowColor((checkedSecundaryColor) ? secundaryColor : primaryColor )}>
              <a href={'#'}>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style={{ background: (checkedSecundaryColor) ? secundaryColor : primaryColor }}><title>btn-add</title><g id="Layer_1" data-name="Layer 1"><path d="M40,77.09A37.09,37.09,0,1,1,77.09,40,37.13,37.13,0,0,1,40,77.09ZM40,4.91A35.09,35.09,0,1,0,75.09,40,35.13,35.13,0,0,0,40,4.91Z"></path><path d="M23.26,52.46a1.68,1.68,0,0,1,.12-1.18c3.22-8.91,8.49-13.14,16.21-13h.21S44,38,46.51,40.1L49.05,37a10,10,0,0,0-2.31-1.42,10.8,10.8,0,1,0-14.15-.24c-5.82,2-10.18,6.86-13,14.57a5.08,5.08,0,0,0,.31,4.75A6,6,0,0,0,24.41,57H44.19V53H24.58A2.28,2.28,0,0,1,23.26,52.46ZM39.8,20.53a6.8,6.8,0,1,1-6.8,6.8A6.8,6.8,0,0,1,39.8,20.53Z"></path><polygon points="58.78 46.4 53.83 46.4 53.83 41.8 49.83 41.8 49.83 46.4 45.01 46.4 45.01 50.4 49.83 50.4 49.83 55 53.83 55 53.83 50.4 58.78 50.4 58.78 46.4"></polygon></g></svg>  
              </a>
            </div>  
          </div>  
          <div className="col-9">   
            <p className="ws-contact-numbers-detail">
              <a href={'#'} target="_blank" rel="noopener noreferrer" style={{ whiteSpace: 'pre-line',textDecoration:'none',color:'#333333',fontSize: '1.1rem', padding: '0px',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }} >{addContact.titulo}</a>
            </p>
          </div>
        </div>

        <div className="row ws-contact-numbers" style={{ cursor: 'pointer' }}> 
          <div className="col-3">
            <div className="">
              <a href={'#'} onClick={(_) => { this.onModalActionButton(1,'tel') } }>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style={{ background: (checkedSecundaryColor) ? secundaryColor : primaryColor }}><title>btn-call</title><g id="Layer_1" data-name="Layer 1"><g id="OMrRjb"><path d="M30.06,25.83c1.48-.27,2.27.39,2.76,1.74.61,1.7,1.38,3.34,2.11,5a1.81,1.81,0,0,1-.35,2.17c-.62.66-1.18,1.36-1.78,2a1.19,1.19,0,0,0-.16,1.54,20.14,20.14,0,0,0,10.62,9,1.06,1.06,0,0,0,1.32-.46c.71-.91,1.43-1.82,2.12-2.74a1.31,1.31,0,0,1,1.84-.45q2.94,1.39,5.91,2.73A1.36,1.36,0,0,1,55.28,48c-.73,5.28-5.33,6.87-8.75,6.24A25.72,25.72,0,0,1,36.73,50,32.61,32.61,0,0,1,26.48,39a11.46,11.46,0,0,1-1.62-7.88A7.82,7.82,0,0,1,28,26.24a6.41,6.41,0,0,1,2-.62Z"></path></g><path d="M40,77.09A37.09,37.09,0,1,1,77.09,40,37.13,37.13,0,0,1,40,77.09ZM40,4.91A35.09,35.09,0,1,0,75.09,40,35.13,35.13,0,0,0,40,4.91Z"></path></g></svg>
              </a>
            </div>  
          </div>  
          <div className="col-9">   
            <p className="ws-contact-numbers-detail">
              <a href={'#'} style={{ whiteSpace: 'pre-line',textDecoration:'none',color:'#333333',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}
              onClick={(_) => { this.onModalActionButton(1,'tel') } }>{telefono.titulo}</a>
            </p>
          </div>
        </div>

        <div className="row ws-contact-numbers" style={{ cursor: 'pointer' }}> 
          <div className="col-3">
            <div className="">
              <a href={'#'} onClick={(_) => { this.onModalActionButton(1,'whats')} }>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style={{ background: (checkedSecundaryColor) ? secundaryColor : primaryColor }}><title>btn-whats</title><g id="Layer_1" data-name="Layer 1"><g id="OMrRjb"><path d="M19.84,60.79c.08-.35.13-.59.19-.81q1.18-4.21,2.38-8.43a1.61,1.61,0,0,0-.15-1.32,20,20,0,0,1,4.94-25,19.53,19.53,0,0,1,15.86-4.28A19.85,19.85,0,0,1,59.53,36.77a19.34,19.34,0,0,1-6.22,18.76,19.81,19.81,0,0,1-22.61,3,1.71,1.71,0,0,0-1.29-.15c-2.95.78-5.9,1.53-8.85,2.28ZM24.7,56c.3-.05.52-.07.73-.12,1.47-.37,2.94-.73,4.4-1.14a1.63,1.63,0,0,1,1.42.19A16.23,16.23,0,0,0,45,56.57,16.67,16.67,0,0,0,39.52,24a16.31,16.31,0,0,0-12.44,6,16.11,16.11,0,0,0-3.84,10.09,16.44,16.44,0,0,0,2.69,9.68,1.23,1.23,0,0,1,.16,1.1c-.43,1.46-.83,2.92-1.23,4.38C24.8,55.51,24.77,55.72,24.7,56Z"></path><path d="M33.33,31.36a1.47,1.47,0,0,1,1.83,1.15c.4,1.12.91,2.21,1.4,3.3a1.2,1.2,0,0,1-.24,1.44c-.41.43-.78.9-1.18,1.35a.8.8,0,0,0-.1,1,13.29,13.29,0,0,0,7,5.95.71.71,0,0,0,.88-.3c.47-.6.95-1.2,1.41-1.82a.86.86,0,0,1,1.21-.3c1.31.62,2.61,1.22,3.92,1.82a.89.89,0,0,1,.55,1.08,4.77,4.77,0,0,1-5.8,4.14,17.19,17.19,0,0,1-6.5-2.79A21.63,21.63,0,0,1,31,40.07a7.62,7.62,0,0,1-1.07-5.23A5.17,5.17,0,0,1,32,31.63a4,4,0,0,1,1.35-.42Z"></path></g><path d="M40,77.09A37.09,37.09,0,1,1,77.09,40,37.13,37.13,0,0,1,40,77.09ZM40,4.91A35.09,35.09,0,1,0,75.09,40,35.13,35.13,0,0,0,40,4.91Z"></path></g></svg>
              </a>
            </div>  
          </div>  
          <div className="col-9">   
            <p className="ws-contact-numbers-detail">     
              <a href={'#'} style={{ cursor: 'pointer',textDecoration:'none',color:'#333333',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}
              onClick={(_) => { this.onModalActionButton(1,'whats')} }>{whatsapp.titulo}</a>
            </p>
          </div>
        </div>

        <div className="row ws-contact-numbers" style={{ cursor: 'pointer' }}> 
          <div className="col-3">
            <div className="">
              <a href={'#'} onClick={(_) => { this.onModalActionButton(1,'email') } }>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style={{ background: (checkedSecundaryColor) ? secundaryColor : primaryColor }}><title>btn-mail</title><g id="Layer_1" data-name="Layer 1"><g id="QxueVm"><path d="M40,53.33H23.5A3.08,3.08,0,0,1,20.19,50V29.88a3.08,3.08,0,0,1,2.37-3.12,4.22,4.22,0,0,1,.94-.08H56.56A3.08,3.08,0,0,1,59.81,30V50.06a3.06,3.06,0,0,1-3.25,3.26H40ZM25.35,29.44l.28.25L39.49,41.54c.42.36.61.35,1.06,0L54.26,29.78c.11-.09.2-.18.37-.34ZM25,50.55H54.93L44.56,41.68c-.81.7-1.58,1.37-2.36,2a3.28,3.28,0,0,1-4.44,0l-1.1-.95-1.29-1.09Zm8.25-10.68L23,31.06V48.69Zm23.8-8.82-10.3,8.79,10.3,8.82Z"></path></g><path d="M40,77.09A37.09,37.09,0,1,1,77.09,40,37.13,37.13,0,0,1,40,77.09ZM40,4.91A35.09,35.09,0,1,0,75.09,40,35.13,35.13,0,0,0,40,4.91Z"></path></g></svg>
              </a>
            </div>  
          </div>  
          <div className="col-9">   
            <p className="ws-contact-numbers-detail">     
              <a href={'#'} style={{ cursor: 'pointer',textDecoration:'none',color:'#333333',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}
              onClick={(_) => { this.onModalActionButton(1,'email') } }>{email.titulo}</a>    
            </p>
          </div>
        </div>
      </div>
    )
  }

  makeViewCarousel() {
    const { primaryColor, secundaryColor, arrDatos, } = this.props.initState
    const { arrCarousel } = arrDatos
    const { arrImages } = arrCarousel

    if(!arrCarousel.checked || arrImages.length === 0)
      return null

    return (
      <div className="ws-about" style={{background : '#ffffff',marginTop: '20px'}} ref={this.refCarousel}>
        <div className="">  
          <h3 className="ws-general-title" style={{ color: primaryColor, whiteSpace: 'pre-line', textDecoration: 'underline',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>{ arrCarousel.title == '' ? 'Título del Slider' : arrCarousel.title }</h3>
      
          <Carousel interval={2000}>

            {
              arrImages.map((t,e) => (
                <Carousel.Item key={e} className={'carousel_banner_general'}>
                  {
                    t.url_share && t.url_share !== '' ? (
                      <div className={'carousel_hyperlink_share'}>
                        <OverlayTrigger
                          placement="bottom"
                          delay={{ show: 250, hide: 400 }}
                          overlay={ renderTooltipUrl }
                        >
                          <p onClick={() => { this.onOpenURLShare(t.url_share) }}>{t.url_share}</p>
                        </OverlayTrigger>
                      </div>
                    ) : null
                  }
                  <img
                    className="d-block w-100"
                    src={
                      t.url == '' ? 'img/icons/placeholder1.png' : t.url
                    }
                    alt={t.title}
                  />
                  <Carousel.Caption>
                    <p>{t.title}</p>
                  </Carousel.Caption>
                </Carousel.Item>
              ))
            }

          </Carousel>
        </div>
      </div>
    )
  }

  makeViewOpiniones() {
    const { primaryColor, arrDatos,secundaryColor} = this.props.initState
    const { arrCarouselOp } = arrDatos
    const { arrOpiniones } = arrCarouselOp

    if(!arrCarouselOp.checked || arrOpiniones.length === 0)
      return null

    return (
      <div className="ws-about" style={{background : '#ffffff',marginTop: '20px'}}>

        <div className="">  
          <h3 className="ws-general-title" style={{ color: primaryColor, whiteSpace: 'pre-line', textDecoration: 'underline',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>
            { arrCarouselOp.title === '' ? 'TESTIMONIALES' : arrCarouselOp.title }
          </h3>
        </div>

          <Carousel interval={2000} indicators={false}>
            {
              arrOpiniones.map((t,e)=>(
                <CarouselItem key={e}>

                  <div className="container">      
                    <div className="row">          
                      <div className="col-4 col-md-3 col-lg-3" style={{textAlign:'right'}}>
                        <img 
                        style={{
                          marginLeft: '0 !important',
                          width: '80px',
                          height: '80px',
                          objectFit: 'cover',
                          borderRadius: '100%',
                          border:'2px solid #ffffff'
                        }}
                        src={t.img == '' ? 'img/icons/profile2.png' : t.img}
                        /> 
                      </div>
                      <div className="col-8 col-md-9 col-lg-9">
                        <p style={{
                          color:'#000000',
                          fontSize:'1rem',
                          fontWeight:'400',
                          textAlign:'left',
                          whiteSpace:'pre-line',
                          backgroundColor:'#ededed',
                          padding:'10px',
                          borderRadius:'10px'
                        }} className="ws-testimonial-text">{ t.val === '' ? 'Texto Descriptivo' : t.val }</p>              
                        <p style={{
                          color: primaryColor,
                          fontSize: '.8rem',
                          fontWeight: '400',
                          textAlign:'right',
                          whiteSpace: 'pre-line'
                        }} className="ws-testimonial-text">{ t.autor === '' ? 'Nombre' : t.autor }</p>              
                        <p style={{
                          color: secundaryColor,
                          fontSize: '.8rem',
                          fontWeight: '400',
                          textAlign:'right',
                          whiteSpace: 'pre-line'
                        }} className="ws-testimonial-text">{ t.trabajo === '' ? 'Puesto / Trabajo' : t.trabajo  }</p>
                      </div>
                    </div>
                  </div>  
{/*                   
                  <div className="ws-testimonial-title">
                    <h1 style={{
                      fontSize:'1.4rem',
                      textAlign:'center',
                      fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
                    }}>
                      { t.autor === '' ? 'Nombre' : t.autor }
                    </h1>
                    <h2 style={{
                      fontSize:'1.1rem',
                      textAlign:'center',
                      fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'
                    }}>
                      { t.trabajo === '' ? 'Puesto / Trabajo' : t.trabajo  }
                    </h2>
                  </div>
                  <div className="ws-testimonial-text" style={{width:'80%',margin:'0 auto',justifyContent:'flex-end'}}>
                    <blockquote style={{marginBottom:'1rem',fontSize:'1.25rem',background:'#f9f9f9',padding:'10px',borderLeft:'3px solid black'}}>
                      <p style={{textAlign:'left',fontSize:'1rem',margin:'0 auto',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>
                        { t.val === '' ? 'Texto Descriptivo' : t.val }
                      </p>
                    </blockquote>
                  </div> */}
                </CarouselItem>
              ))
            }
          </Carousel>
      </div>
    )
  }

  makeViewVisitame() {
    const { primaryColor, arrDatos, secundaryColor,checkedSecundaryColor } = this.props.initState
    const { ubicacion } = arrDatos
    const { direccion, ciudad, codigoPostal, estado } = ubicacion

    const urlMap = `https://www.google.com/maps/embed/v1/place?key=AIzaSyCK5pcmRfRbz_tuBlgkCYDw8_rybcqEAuY&q=${direccion}+${ciudad}+${codigoPostal}+${estado}`;

    const backColor = (checkedSecundaryColor) ? secundaryColor : '#FFFFFF';
    const color     = (checkedSecundaryColor) ? '#ffffff' : '#000000'; 
    
    if(!ubicacion.checked)
      return null

    return (
      <div className="ws-general-title" style={{backgroundColor: primaryColor}}>
        <div className="col-12">  
          <p style={{color: '#ffffff', textDecoration: 'underline',fontSize:'1.3rem',fontWeight:'500',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>VISÍTAME EN:</p>

          <div className="ws-portfolio-promo-video">
            <iframe
              src={ urlMap }
              style={{ border: '0', height: 350, width: '100%' }}
              allowFullScreen=""
              aria-hidden="false"
              tabIndex="0"
              title="Maps"
            ></iframe>
          </div>

          <div className="col-12">  
            <p style={{ color: '#ffffff', whiteSpace: 'pre-line', textTransform: 'uppercase',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}>
              { direccion!='' ? direccion : 'Ciudad de México' }
              {ciudad!='' ?  ', ' + ciudad : ', CDMX' }
              {codigoPostal!='' ? ', ' + codigoPostal : '' }
              {estado != '' ? ', '+estado : '' }
            </p>
          </div>

          <div className="col-12">    
            <div className="ws-contact-numbers-btn">      
              <a target="_blank" rel="noopener noreferrer" style={{ background: backColor, color: color, textAlign: 'center', margin: '0 auto', whiteSpace: 'pre-line',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }} href={`https://www.google.com.mx/maps/search/${ direccion!='' ? encodeURI(direccion) : 'Ciudad de México'} ${ ciudad!='' ? ', '+encodeURI(ciudad) : ', CDMX'} ${ codigoPostal!='' ? ', '+encodeURI(codigoPostal) : ''} ${ estado!='' ? ', '+encodeURI(estado) : ''}`} className="btn btn-lg" role="button" aria-disabled="false">¡Abrir en Google Maps!</a>   
            </div>  
          </div>

        </div>
      </div>
    )
  }

  makeViewDocumentos() {
    const { primaryColor, secundaryColor, arrDatos, } = this.props.initState
    let { arrDocumentos } = arrDatos

    const { arrFiles } = arrDocumentos

    if(!arrDocumentos.checked || arrFiles.length === 0)
      return null

    return (
      <div className="ws-about" style={{background : '#f3f3f3',marginTop: '20px'}} ref={this.refDocumentos}>
        <div className="">  
          <h3 className="ws-general-title" style={{ color: primaryColor, whiteSpace: 'pre-line', textDecoration: 'underline',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>{ arrDocumentos.title == '' ? 'Título de la nube' : arrDocumentos.title }</h3>
      
          {
            arrFiles.map((t,e) => (
              <div className={'row ws__documents_row'} >
                <div className={'col col-2'}>
                  <img src={'img/icons/portada_1.png'} className={'ws__documents_img'} />
                </div>
                <div className={'col col-8'}>
                  <p className={'ws__documents_title'}>{t.title}</p>
                </div>
                <div>
                  <p className={'ws__documents_counter'}>0</p>
                  <p className={'ws__documents_downloads'}>Descargas</p>
                </div>
              </div>
            ))
          }

        </div>
      </div>
    )
  }

  makeViewRedesSociales() {
    const { primaryColor, arrDatos,secundaryColor,checkedSecundaryColor,iconVersion } = 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

    const viewFacebook  = (facebook.checked) ? 'block' : 'none' ;
    const viewInstagram  = (instagram.checked) ? 'block' : 'none' ;
    const viewLinkedin  = (linkedin.checked) ? 'block' : 'none' ;
    const viewYoutube  = (youtube.checked) ? 'block' : 'none' ;
    const viewTwitter  = (twitter.checked) ? 'block' : 'none' ;

    const viewZoom  =  ( arrDatos.hasOwnProperty('zoom') ) ? (zoom.checked) ? 'block' : 'none' : 'none' ;
    const viewBehance  = ( arrDatos.hasOwnProperty('behance') ) ? (behance.checked) ? 'block' : 'none' : 'none' ;
    const viewBlog  = ( arrDatos.hasOwnProperty('blog') ) ? (blog.checked) ? 'block' : 'none' : 'none';
    const viewDeviantart  = ( arrDatos.hasOwnProperty('deviantart') ) ? (deviantart.checked) ? 'block' : 'none' : 'none' ;
    const viewDiscord  = ( arrDatos.hasOwnProperty('discord') ) ? (discord.checked) ? 'block' : 'none' : 'none';
    const viewDribble  = ( arrDatos.hasOwnProperty('dribble') ) ? (dribble.checked) ? 'block' : 'none' : 'none' ;
    const viewDrive  = ( arrDatos.hasOwnProperty('drive') ) ? (drive.checked) ? 'block' : 'none' : 'none';
    const viewDropbox  = ( arrDatos.hasOwnProperty('dropbox') ) ? (dropbox.checked) ? 'block' : 'none' : 'none';
    const viewFeed  = ( arrDatos.hasOwnProperty('feed') ) ? (feed.checked) ? 'block' : 'none' : 'none';
    const viewFlickr  = ( arrDatos.hasOwnProperty('flickr') ) ? (flickr.checked) ? 'block' : 'none' : 'none';
    const viewFoursquare  = ( arrDatos.hasOwnProperty('foursquare') ) ? (foursquare.checked) ? 'block' : 'none' : 'none';
    const viewGithub  = ( arrDatos.hasOwnProperty('github') ) ? (github.checked) ? 'block' : 'none' : 'none' ;
    const viewHangout  = ( arrDatos.hasOwnProperty('hangout') ) ? (hangout.checked) ? 'block' : 'none' : 'none' ;
    const viewTarjetaid  = ( arrDatos.hasOwnProperty('tarjetaid') ) ? (tarjetaid.checked) ? 'block' : 'none' : 'none';
    const viewKickstart  = ( arrDatos.hasOwnProperty('kickstart') ) ? (kickstart.checked) ? 'block' : 'none' : 'none' ;
    const viewMessenger  = ( arrDatos.hasOwnProperty('messenger') ) ? (messenger.checked) ? 'block' : 'none' : 'none' ;
    const viewPhotos  = ( arrDatos.hasOwnProperty('photos') ) ? (photos.checked) ? 'block' : 'none' : 'none';
    const viewPinterest  = ( arrDatos.hasOwnProperty('pinterest') ) ? (pinterest.checked) ? 'block' : 'none' : 'none';
    const viewReddit  = ( arrDatos.hasOwnProperty('reddit') ) ? (reddit.checked) ? 'block' : 'none' : 'none';
    const viewSnapchat  = ( arrDatos.hasOwnProperty('zoom') ) ? (zoom.checked) ? 'block' : 'none' : 'none';
    const viewSoundcloud  = ( arrDatos.hasOwnProperty('soundcloud') ) ? (soundcloud.checked) ? 'block' : 'none' : 'none';
    const viewSpotify  = ( arrDatos.hasOwnProperty('spotify') ) ? (spotify.checked) ? 'block' : 'none' : 'none';
    const viewTiktok  = ( arrDatos.hasOwnProperty('tiktok') ) ? (tiktok.checked) ? 'block' : 'none' : 'none';
    const viewTumblr  = ( arrDatos.hasOwnProperty('tumblr') ) ? (tumblr.checked) ? 'block' : 'none' : 'none';
    const viewTwitch  = ( arrDatos.hasOwnProperty('twitch') ) ? (twitch.checked) ? 'block' : 'none' : 'none';
    const viewVimeo  = ( arrDatos.hasOwnProperty('vimeo') ) ? (vimeo.checked) ? 'block' : 'none' : 'none';

    const viewSite  = (site.checked) ? 'block' : 'none' ;

    return (
      <div className="ws-redes-sociales">
        <p className="ws-general-title" style={{color: primaryColor , textDecoration: 'underline',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>MIS REDES SOCIALES</p>
        <div className="row justify-content-center text-center">   
          {/* #facebook */}
          <a href={ facebook.url } target="_blank" rel="noopener noreferrer" style={{ margin: '10px 30px', display: viewFacebook }}>
            <IconFacebook version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #instagram */}
          <a href={ instagram.url } target="_blank" style={{ margin: '10px 30px', display: viewInstagram }}>
            <IconInstagram version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>   
          {/* #linkedin */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewLinkedin }}>
            <IconLinkedin version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #youtube */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewYoutube }}>
            <IconYoutube version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #twitter */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewTwitter }}>
            <IconTwitter version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #zoom */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewZoom }}>
            <IconZoom version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #behance */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewBehance }}>
            <IconBehance version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #blog */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewBlog }}>
            <IconBlog version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #deviantart */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewDeviantart }}>
            <IconDeviantart version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #discord */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewDiscord }}>
            <IconDiscord version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #dribble */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewDribble }}>
            <IconDribble version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #drive */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewDrive }}>
            <IconDrive version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #dropbox */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewDropbox }}>
            <IconDropbox version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #feed */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewFeed }}>
            <IconFeed version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #flickr */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewFlickr }}>
            <IconFlickr version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #foursquare */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewFoursquare }}>
            <IconFoursquare version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #github */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewGithub }}>
            <IconGithub version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #hangout */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewHangout }}>
            <IconHangout version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #tarjetaid */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewTarjetaid }}>
            <IconTarjetaid version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #kickstart */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewKickstart }}>
            <IconKickstart version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #messenger */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewMessenger }}>
            <IconMessenger version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #photos */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewPhotos }}>
            <IconPhotos version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #pinterest */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewPinterest }}>
            <IconPinterest version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #reddit */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewReddit }}>
            <IconReddit version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #snapchat */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewSnapchat }}>
            <IconSnapchat version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #soundcloud */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewSoundcloud }}>
            <IconSoundcloud version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #spotify */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewSpotify }}>
            <IconSpotify version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #tiktok */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewTiktok }}>
            <IconTiktok version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #tumblr */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewTumblr }}>
            <IconTumblr version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #twitch */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewTwitch }}>
            <IconTwitch version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #vimeo */}
          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewVimeo }}>
            <IconVimeo version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          

          <a href={"#"} target="_blank" style={{ margin: '10px 30px', display: viewSite }}>
            <IconWeb version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
            {/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" style={{ background: (checkedSecundaryColor) ? secundaryColor : primaryColor }}><title>btn-web</title><g id="Layer_3" data-name="Layer 3"><path d="M40,77.09A37.09,37.09,0,1,1,77.09,40,37.13,37.13,0,0,1,40,77.09ZM40,4.91A35.09,35.09,0,1,0,75.09,40,35.13,35.13,0,0,0,40,4.91Z"/><g id="gZp12A.tif"><path d="M41.71,10.58c.94.12,1.88.22,2.82.35a28.89,28.89,0,0,1,16.73,8.48A27.66,27.66,0,0,1,69.06,34c2.14,11.59-1.31,21.3-10.31,28.92A27.23,27.23,0,0,1,43.13,69.3C32.67,70.14,24,66.47,17.31,58.37A28.25,28.25,0,0,1,11.12,43.9,29.46,29.46,0,0,1,25.49,14.61,29.13,29.13,0,0,1,38.23,10.7a3,3,0,0,0,.52-.12ZM54.46,41a37.64,37.64,0,0,1-2.78,13.4l6.81,3.74A25.73,25.73,0,0,0,65.93,41ZM28.9,54.41A37.85,37.85,0,0,1,26.1,41H14.65a25.69,25.69,0,0,0,7.43,17.13ZM59.51,23.12l-7.16,4.22a38.58,38.58,0,0,1,2.13,11.72h11.4C66.18,34.37,62.83,26.08,59.51,23.12ZM28.23,27.34,21,23.1a25.58,25.58,0,0,0-6.37,16H26.11A38.17,38.17,0,0,1,28.23,27.34ZM39.34,41H28A35.86,35.86,0,0,0,30.7,53.92a31.86,31.86,0,0,1,8.64-1.46Zm1.93,0V52.39c1.48.17,2.92.27,4.34.51s2.84.62,4.3,1A35.71,35.71,0,0,0,52.63,41Zm-1.91-1.92v-.6c0-2.78,0-5.57,0-8.36,0-.54-.19-.63-.67-.67-1.55-.15-3.11-.31-4.64-.58-1.35-.25-2.67-.65-4.06-1a35.12,35.12,0,0,0-2,11.21Zm1.9-9.58v9.55H52.6c.19-2.63-1.19-9.82-2.14-11.22A31.35,31.35,0,0,1,41.26,29.5ZM30.71,26.09a29.38,29.38,0,0,0,8.61,1.57V14.34A30.84,30.84,0,0,0,30.71,26.09Zm19.15,0a30.88,30.88,0,0,0-8.59-11.73V27.66A29,29,0,0,0,49.86,26.08ZM44.47,14.76a34.38,34.38,0,0,1,7.12,10.68c2.15-.82,5.85-3,6.47-3.86A25.07,25.07,0,0,0,44.47,14.76ZM36,14.82a25.12,25.12,0,0,0-13.53,6.81A28.73,28.73,0,0,0,29,25.45,35.32,35.32,0,0,1,36,14.82ZM31.49,55.66a30.1,30.1,0,0,0,7.81,10V54.33A25.55,25.55,0,0,0,31.49,55.66Zm17.63,0a28.42,28.42,0,0,0-7.84-1.31V65.72A30.72,30.72,0,0,0,49.12,55.62Zm1.92.55c-1.06,1.73-1.93,3.32-3,4.8s-2.26,2.88-3.44,4.35A25.61,25.61,0,0,0,57.09,59.4ZM36,65.25a35.19,35.19,0,0,1-6.25-9,28.12,28.12,0,0,0-6.11,3.28A25,25,0,0,0,36,65.25Z"/></g></g></svg> */}
          </a>
        
          {/* #call */}
          <a href={"#"} target="_blank" rel="noopener noreferrer" style={{ margin: '10px 30px' }}>   
            <IconCall version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>
          {/* #whatsapp */}
          <a href={"#"} target="_blank" rel="noopener noreferrer" style={{ margin: '10px 30px' }}>
            <IconWhatsapp version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>   
          {/* #email */}
          <a href={"#"} target="_blank" rel="noopener noreferrer" style={{ margin: '10px 30px' }}>
            <IconMail version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
          </a>

        </div>
      </div>
    )
  }

  makeViewShareQR() {
    const { primaryColor,checkedSecundaryColor,secundaryColor,arrDatos,iconVersion } = this.props.initState
    return (
      <div className="ws-contact-qr" style={{ color: primaryColor}}>
        <div className="col-12">
          <p style={{ color: primaryColor,marginTop: '35px',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}>COMPARTE Y ESCANEA CON CÓDIGO QR</p>
        </div>
        <div className="col-12">
          <IconShare version={iconVersion} style={{background:'initial',fill:(checkedSecundaryColor) ? secundaryColor : primaryColor,padding:'0px'}} />
        </div>
        <div className="col-12 ws-contact-qr-img">
          <img alt={'Imagen'} src="img/qr.png" style={{ width: '250px', height: '250px'}} />
        </div>
        <div className="col-12 ws-contact-qr-img">
          <p style={{fontWeight : 'bold', color: primaryColor, cursor: 'pointer',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>Compartir desde mi WhatsApp</p>
        </div>
      </div>
    )
  }

  makeViewFooter() {
    const { primaryColor,secundaryColor,checkedSecundaryColor } = this.props.initState
    const color = (checkedSecundaryColor) ? secundaryColor : primaryColor
    return (
      <>
        <div id="triangle2" style={{ borderBottom: '80px solid '+color }}></div>
        <div className="row footer4"> 
          <div className="footer3" style={{ backgroundColor: (checkedSecundaryColor) ? secundaryColor : primaryColor}}>   
            <div className="subfooter2">     
              <a href={"http://tarjeta.id/id"}>
                <img alt={'Imagen'} src="https://tarjeta.id/imports/id/imgs/logo3.png" style={{ width: '150px' }} />
              </a>     
              <p style={{ color: '#fff', marginTop: '14px',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}>Este contacto fue diseñado con 
                <a href="http://tarjeta.id/id" style={{ color: '#fff' }} > tarjeta.id</a> | 
                <span style={{ color: '#fff',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }}> El poder de la primera impresión</span></p>
              <p className="--intermitent">
                {/*<a href={'#'} style={{ color: '#fff', textDecoration: 'underline' }}>¿Deseas una tarjeta como esta? Haz clic aquí.</a>*/}
              </p>      
              <p style={{ color: '#fff',fontFamily:'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"' }} >© 2020, All Rights Reserved, W Soft SA de CV.</p>    
            </div>  
          </div>
        </div>
      </>
    )
  }


  onModalActionButton(opt,type) {
    let titleModal = ''
    const typeArr = type

    if( type === 'tel' )
      titleModal = 'Llamar a:';
    else if( type === 'whats' )
      titleModal = 'Enviar Whatsapp a:';
    else if( type === 'email' )
      titleModal = 'Enviar Correo Electrónico a:';

    this.setState({
      isOpenModal: true,
      titleModal, 
      typeArr,
    })
  }

  onOpenURLShare(url) {
    window.open(url,'_blank');
  }

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

};

export default withRouter(PreviewPage)