import React, { Component } from "react";
import "./main.css";
import { withRouter, useLocation, } from "react-router-dom";
import {Button,Modal,Container,Col,Row } from 'react-bootstrap'
// import Carousel from 'react-bootstrap/Carousel'
// import ReactPlayer from 'react-player';
// import ModalsPreviewPage from "./modals.preview.page";
import {CopyToClipboard} from 'react-copy-to-clipboard';
import moment from 'moment';
import Countdown from 'react-countdown';


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

    this.state = {
      copied: false,
      changeCard: false,
      card_number: '',
      card_month:'',
      card_year:'',
      card_cvc:'',
      id_pixel:'',
      id_analytics:'',
      pass1:'',
      pago:'',
      pass2:'',
      modal: {
        status:false,
        mode: 'resume',
        title:'Título del modal',
        description: 'Descripción del modal',
        btnDisabled: false
      },
      timeDown: (Date.now() + 30000),

      codeConnectFB: '',
    }
  }

   _handleChange = (e) => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }


  componentDidMount() {

    let param = window.location.search;

    if( param.indexOf('?app_id_s=') !== -1 ) {
      let id = param.split('?app_id_s=')
      id = id[1]
      this.verifyExistsSession(id)
    } else {
      param = window.location.pathname;
      if(this.props.initState.app_id_s !== '') {
        this.verifyExistsSession(this.props.initState.app_id_s)
      } else {
        this.props.history.push('/signin');
      }

    }
  }

  verifyExistsSession(id) {
    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=existAppIdSecret`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( {
        id
      } ),
    })
    .then(res => res.json())
    .then((res) => {
      console.log(res)
      this.props.initsetState({app_id_s:id})
      this.setState({id_pixel:res.id_pixel, id_analytics: res.id_analytics, pago:res.pago})
      if(res.username === undefined){
        alert("El app id ingresado no es válido");
        this.props.history.push('/plan');
      } else if(res.username === ''){
        this.props.history.push('/plan');
      } else if(res.id_customer === '') {
        // alert('Para poder seguir utilizando los beneficios que tarjeta.id te ofrece es necesario que realices tu pago.');
        // window.location.href = 'https://tarjeta.id/payments.php?id='+id;
        // this.props.history.push('/');
        this.props.initsetState({
          sectionPage: 'main',
          arrData: res
        })
      } else {
        // this.props.history.push('/');
        this.props.initsetState({
          sectionPage: 'main',
          arrData: res
        })
        fetch(`https://diana.wsoft.com.mx:3666/getInfoCustomer?id_customer=${res.id_customer}&dev=10`, {
          method: "GET",
          mode: "cors",
          // body: JSON.stringify(),
        })
        .then(res => res.json())
        .then((res) => {
          this.props.initsetState({conekta:res})
        })
      }
    })
  }

  reanudarSuscripcion() {

    const { app_id_s, conekta } = this.props.initState
    const { subscription } = conekta
    const id_customer = subscription.customer_id;

    if (id_customer === '') return false;

    let dataPOST = { id_customer, app_id_s }

    const {modal} = this.state;
    modal.btnDisabled = true;
    this.setState(modal);

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=reanudarSuscripcion`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
      alert("Tu suscripción ha sido renovada");
      modal.status = false;
      modal.btnDisabled = false;
      this.setState(modal);
       window.location.reload(false);
    })

  }

  pausarSuscripcion() {

    const { app_id_s, conekta } = this.props.initState
    const { subscription } = conekta
    const id_customer = subscription.customer_id;

    if (id_customer === '') return false;

    let dataPOST = { id_customer, app_id_s }

    const {modal} = this.state;
    modal.btnDisabled = true;
    this.setState(modal);

    // const proccessData = new Promise((resolve,reject) => {
    //   setTimeout(() => {
    //     resolve("Datos Procesados!");
    //   }, 3000);
    // });

    // proccessData.then((success) => {
    //   console.log(success);
    //   alert("Tu suscripción ha sido pausada");
    //   modal.status = false;
    //   modal.btnDisabled = false;
    //   this.setState(modal);
    // });

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=pausarSuscripcion`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
      alert("Tu suscripción ha sido pausada");
      modal.status = false;
      modal.btnDisabled = false;
      this.setState(modal);
       window.location.reload(false);
    })

  }

  cancelarSuscripcion() {

    const { arrData, app_id_s, conekta } = this.props.initState
    const { subscription } = conekta
    const id_customer = subscription.customer_id;

    if (id_customer === '') return false;

    let dataPOST = { id_customer, app_id_s }

    const {modal} = this.state;
    modal.btnDisabled = true;
    this.setState(modal);

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=cancelarSuscripcion`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       alert('La suscripción ha sido cancelada')
        modal.status = false;
        modal.btnDisabled = false;
        this.setState(modal);
       window.location = `https://tarjeta.id/payments.php?nombre=${conekta.name}&telefono=${ conekta.phone}&correo=${conekta.email}&modalidad=${arrData.modalidad}&id=${app_id_s}`
    })
  }

  actualizarSuscripcion(id_customer, id_card, id_plan) {
    if (id_customer === '' || id_plan === '') return false;
    let dataPOST = { id_customer, id_card, id_plan }
    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=actualizarSuscripcion`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       console.log(res)
    })
  }

  changeInfoCard(id_customer) {
    const {card_number, card_month, card_year, card_cvc} = this.state
    if (card_number !== '' && card_month !== '' && card_year !== '' && card_cvc !== '') {
      this.setState({changeCard:false})
      // let dataPOST = { card_number, card_month, card_year, card_cvc }
      // fetch(`https://diana.wsoft.com.mx:3666/getInfoCustomer?id_customer=${res.id_customer}&dev=1`, {
      //   method: "POST",
      //   mode: "cors",
      //   body: JSON.stringify( dataPOST ),
      // })
      // .then(res => res.json())
      // .then((res) => {
      //   console.log(res)
      // })

    } else {
      alert('Los datos de tu tarjeta estan incompletos')
    }
  }

  showModal(mode){
    const { modal } = this.state;
    modal.status = true;
    if(mode==='pause'){
      modal.mode = 'pause';
      modal.title = "¿Deseas pausar tu suscripción?";
      modal.description = "Al pausar tu suscripción tu tarjeta.id no será visible y no se te cobrará ningún cargo, podrás reanudar tu suscripción más adelante."
    } else if(mode==='cancel'){
      modal.mode = 'cancel';
      modal.title = "¿Desea cancelar tu suscripción?";
      modal.description = "Al cancelar tu suscripción ya no podrás acceder a este panel, tu tarjeta.id y demás registros serán borrados automáticamente del sistema."
    } else if(mode==='resume'){
      modal.mode = 'resume';
      modal.title = "¿Deseas reanudar tu suscripción?";
      modal.description = "Al reanudar tu suscripción podrás seguir disfrutando de todos los beneficios que tarjeta.id tiene para ti."
    }else{
      modal.mode = 'none';
      modal.title = "Modal Title";
      modal.description = "Modal Description"
    }
    this.setState(modal);
  }

  activarMiTarjeta() {
    const { app_id_s } = this.props.initState
    window.location.href = 'https://tarjeta.id/payments.php?id='+app_id_s;
  }

  hideModal(){
    const {modal} = this.state;
    modal.status = false;
    this.setState(modal);
  }

  saveIdPixel() {
    const {id_pixel} = this.state
    const {app_id_s} = this.props.initState
    const re = /^[0-9\b]+$/;
    if (!re.test(id_pixel) || id_pixel.toString().length < 15) {
      alert('El ID Pixel de Facebook no es válido')
      return false;
    }

    let dataPOST = { id_pixel, app_id_s }

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=saveIdPixel`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       alert('Tu id pixel ha sido guardado')
    })
  }

  saveIdAnalytics() {
    const {id_analytics} = this.state
    const {app_id_s} = this.props.initState
    const re = /^ua-\d{4,9}-\d{1,4}$/i;
    if (id_analytics.toString().length < 10) {
      alert('El ID de Google Analytics no es válido')
      return false;
    }

    let dataPOST = { id_analytics, app_id_s }

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=saveIdGoogleAnalytics`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       alert('Tu ID de Google Analytics ha sido guardado')
    })
  }

  deleteIdPixel() {
    const {app_id_s} = this.props.initState
    let dataPOST = {app_id_s }

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=deleteIdPixel`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       alert('Tu id pixel ha sido eliminado')
        this.setState({id_pixel:''})
    })
  }

  deleteIdAnalytics() {
    const {app_id_s} = this.props.initState
    let dataPOST = { app_id_s }

    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=deleteIdGoogleAnalytics`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( dataPOST ),
    })
    .then(res => res.json())
    .then((res) => {
       alert('Tu ID de Google Analytics ha sido eliminado')
        this.setState({id_analytics: ''})
    })
  }

  /*_handleChangeInt = (e) => {
      const re = /^[0-9\b]+$/;
      if ((e.target.value === '' || re.test(e.target.value)) && e.target.value.toString().length < 17) {
         this.setState({id_pixel: e.target.value})
      }
   }*/

  render() {
    const { height, arrData, conekta, } = this.props.initState
    const { codeConnectFB, pago } = this.state

    const url = `https://tarjeta.id/${arrData.username}`

    const { payment_sources, subscription } = conekta

    return (
      <div className="grid-cell grid-cell-sidebar" style={{ height: `calc(${height}px - 60px)`, overflow: 'auto', paddingTop: 20, }} >
        { /* Preview section */ }
        <Container>
          <Row>
            <Col xs={12} md={9} className="box__dashboard__left">
              <Row>
                {/*DATOS MI TARJETA ID*/}
                <Col xs={12}>
                  <p className="box__panel__title">Mi tarjeta.id</p>
                </Col>
                <Col xs={12}>
                  <div className="box__panel__content">
                    <p className="box__panel__subtitle">Tarjeta.id {arrData.modalidad}</p>
                    <a href={`https://tarjeta.id/${arrData.username}`} className="box__panel__subtitle__url">https://tarjeta.id/{arrData.username}</a>

                    <CopyToClipboard text={url}
                      onCopy={() => this.setState({copied: true})}>
                      <button className=" btn btn-primary box__panel__button__url">Copiar mi url</button>
                    </CopyToClipboard>


                    <button onClick={()=> {this.goToEditTarjeta()}} className=" btn btn-primary box__plan_button__px align-self-end">Editar mi ID</button>
                  </div>
                </Col>

                <Col xs={12}>
                  <p className="box__panel__title">CONECTAR MESSENGER CON MI SESIÓN</p>
                </Col>
                <Col xs={12}>
                  <div className="box__panel__content">
                    <Row>
                      <Col xs={12} sm={8}>
                      {
                        codeConnectFB == '' ? (
                          (typeof arrData.info_device !== 'undefined') && (arrData.info_device).id_fb === '' ? (
                            <p>Tu cuenta aún no está vinculada con Facebook</p>
                          ) : <p>Conectado con Facebook</p>
                        ) : (
                          <Row>
                            <Col>
                              <p>Tu código es: {codeConnectFB}</p>
                            </Col>
                            <Col>
                              <Row>
                                <Col>
                                  <p>Expira en:</p>
                                </Col>
                                <Col>
                                  <Countdown
                                    date={(Date.now() + 120000)}
                                    daysInHours={false}
                                    zeroPadDays={0}
                                    precision={3}
                                    onComplete={() => {
                                      this.setState({
                                        codeConnectFB: '',
                                      })
                                    }}
                                  />
                                </Col>
                              </Row>
                            </Col>
                          </Row>
                        )
                      }
                      </Col>
                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                      {
                        codeConnectFB === ''
                        ? <button onClick={()=> {this.setVinculateAccountMessenger()}} className="btn btn-primary box__plan_button__px align-self-end">Vincular cuenta</button>
                        : (
                          <CopyToClipboard text={codeConnectFB}
                            onCopy={() => this.setState({copied: true})}>
                            <button onClick={()=> {this.goToMessenger()}} className="btn btn-primary box__plan_button__px align-self-end">Copiar e ir a Messenger</button>
                          </CopyToClipboard>
                        )
                      }
                      </Col>

                    </Row>
                  </div>
                </Col>

                <Col xs={12}>
                  <p className="box__panel__title">ID PIXEL DE FACEBOOK</p>
                </Col>
                <Col xs={12}>
                  <div className="box__panel__content">
                    <Row>
                      <Col xs={12} sm={4}>
                        <input name="id_pixel" onChange={this._handleChange} value={this.state.id_pixel} type="text" className="form-control form-control-md" placeholder="ID Pixel de Facebook" />
                      </Col>
                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                        <button onClick={()=> {this.saveIdPixel()}} className="btn btn-primary box__plan_button__px align-self-end">Guardar</button>
                      </Col>
                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                        <button onClick={()=> {this.deleteIdPixel()}} className="btn btn-primary box__plan_button__px align-self-end" style={{'background':'gray !important'}}>Eliminar</button>
                      </Col>
                    </Row>
                  </div>
                </Col>

                <Col xs={12}>
                  <p className="box__panel__title">ID GOOGLE ANALYTICS</p>
                </Col>
                <Col xs={12}>
                  <div className="box__panel__content">
                    <Row>
                      <Col xs={12} sm={4}>
                        <input name="id_analytics" onChange={this._handleChange} value={this.state.id_analytics} type="text" className="form-control form-control-md" placeholder="ID Google Analytics" />
                      </Col>
                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                        <button onClick={()=> {this.saveIdAnalytics()}} className="btn btn-primary box__plan_button__px align-self-end">Guardar</button>
                      </Col>
                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                        <button onClick={()=> {this.deleteIdAnalytics()}} className="btn btn-primary box__plan_button__px align-self-end" style={{'background':'gray !important'}}>Eliminar</button>
                      </Col>
                    </Row>
                  </div>
                </Col>

                <Col xs={12}>
                  <p className="box__panel__title">CONTRASEÑA</p>
                </Col>
                <Col xs={12}>
                  <div className="box__panel__content">
                    <Row>
                      <Col xs={12} sm={4}>
                        <input name="pass1" onChange={this._handleChange} value={this.state.pass1} type="password" className="form-control form-control-md" placeholder="Escribe tu nueva contraseña" />
                      </Col>
                      <Col xs={12} sm={4}>
                        <input name="pass2" onChange={this._handleChange} value={this.state.pass2} type="password" className="form-control form-control-md" placeholder="Confirma tu nueva contraseña" />
                      </Col>

                      <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                        <button onClick={()=> {this.updatePassword()}} className="btn btn-primary box__plan_button__px align-self-end" style={{'background':'gray !important'}}>Guardar</button>
                      </Col>
                    </Row>
                  </div>
                </Col>

                { typeof payment_sources !== 'undefined' ? this.makeSuscriptionConekta() : (pago === 'activado') ? '' : this.makeDetailNotSuscription() }

              </Row>
            </Col>
            {/*BOTÓN DE CERRAR SESIÓN*/}
            <Col xs={12} className="box__dashboard__sesion">
              <button
                onClick={() => { localStorage.removeItem('t_id_tkn', ''); window.location = '/'; }}
                className="btn btn-danger box__plan__button__invert">Cerrar Sesión</button>
            </Col>
          </Row>
        </Container>

        {

        }

        <Modal show={this.state.modal.status} onHide={() => { this.hideModal() }} backdrop="static" animation={false}>
          <Modal.Header>
            <Modal.Title>{this.state.modal.title}</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <p>{this.state.modal.description}</p>
          </Modal.Body>
          <Modal.Footer>
            <Button disabled={this.state.modal.btnDisabled===true ? 'disabled' : '' } variant="secondary" onClick={()=>{ this.hideModal() }}>
              Cerrar
            </Button>
            {
              (this.state.modal.mode==='pause')    ? <Button disabled={this.state.modal.btnDisabled===true ? 'disabled' : '' } variant="danger" onClick={ () => { this.pausarSuscripcion() } }>Pausar Suscripción</Button>
              : this.state.modal.mode === 'cancel' ? <Button disabled={this.state.modal.btnDisabled===true ? 'disabled' : '' } variant="danger" onClick={ () => { this.cancelarSuscripcion() } }>Cancelar Suscripción</Button>
              : this.state.modal.mode === 'resume' ? <Button disabled={this.state.modal.btnDisabled===true ? 'disabled' : '' } variant="success" onClick={ () => { this.reanudarSuscripcion() }}>Reanudar Suscripción</Button>
              : <Button variant="danger">Aceptar</Button>
            }
          </Modal.Footer>
        </Modal>

      </div>
    )
  }

  updatePassword(){
    const {pass1, pass2} = this.state
    if(pass1.length < 8) {
      alert("Tu contraseña debe tener al menos 8 dígitos")
      return false
    } else if(pass1 != pass2) {
      alert("Tus contraseñas no coinciden")
    } else {
      fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=updatePassword`, {
        method: "POST",
        mode: "cors",
        body: JSON.stringify( {
          app_id_s: this.props.initState.app_id_s,
          pass1:pass1,
          pass2:pass2,
        } ),
      })
      .then(res => res.json())
      .then((res) => {
        if(res.status == 'ok') {
          alert("Tu contraseña ha cambiado")
          this.setState({pass1:'', pass2:''})
        }

      })
    }
  }

  goToMessenger() {
    window.location = 'https://m.me/tarjeta.id?ref=conecta_fb_tarjetaid'
  }

  setVinculateAccountMessenger() {
    fetch(`https://tarjeta.id/REST/controllers/payController.php?opt=generateSimpleCode`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( {
        app_id_s: this.props.initState.app_id_s,
      } ),
    })
    .then(res => res.json())
    .then((res) => {
      this.setState({
        codeConnectFB: res.code
      })
      console.log( res )

    })
  }

  makeSuscriptionConekta() {
    const { height, arrData, conekta } = this.props.initState
    const url = `https://tarjeta.id/${arrData.username}`
    const { payment_sources, subscription } = conekta

    return (
      <div>
        {/*SUSCRIPCIONES ACTIVAS*/}
        <Col xs={12}>
          <p className="box__panel__title">SUSCRIPCIÓN</p>
        </Col>
        <Col xs={12}>
          <div className="box__panel__content">
          {
            (subscription.status === 'active')?
              <Row>
                <Col xs={12} sm={8}>
                  <p className="box__panel__subtitle">{ this.getTextPlan(subscription.plan_id) }</p>
                  <p className="box__panel__text__info">Suscripción: {moment.unix(subscription.created_at).format('DD/MM/YYYY')}.</p>

                  <p className="box__panel__text__info">Inicio del periodo de cobro: {moment.unix(subscription.billing_cycle_start).format('DD/MM/YYYY')}</p>

                  <p className="box__panel__text__info">Término del periodo de cobro: {moment.unix(subscription.billing_cycle_end).format('DD/MM/YYYY')}</p>

                  <p className="box__panel__text__info">Al terminar este periodo se hará un cobro de ${this.getMoneyPlan(subscription.plan_id)} mxn por concepto:</p>
                  <p className="box__panel__text__info" id={'text__concept'}>Transacción plan tarjeta.id</p>
                </Col>
                <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                  <button
                  onClick={() => { this.showModal('pause') }}
                  className="btn btn-primary box__plan_button__px__cancel align-self-end">Pausar suscripción</button>
                </Col>
              </Row>
            :
            (subscription.status === 'canceled')?
              <Row>
                <Col xs={12} sm={8}>
                  <p className="box__panel__subtitle">No tienes una suscripción activa</p>
                  <p className="box__panel__text__info">Cancelaste tu suscripción el {moment.unix(subscription.canceled_at).format('DD/MM/YYYY')}.</p>
                </Col>
              </Row>
            :
            (subscription.status === 'paused')?
              <Row>
                <Col xs={12} sm={8}>
                  <p className="box__panel__subtitle">No tienes una suscripción activa</p>
                  <p className="box__panel__text__info">Pausaste tu suscripción el {moment.unix(subscription.paused_at).format('DD/MM/YYYY')}.</p>
                </Col>
                <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                  <button
                  onClick={() => { this.showModal('resume') }}
                  className="btn btn-primary box__plan_button__px__cancel align-self-end">Activar suscripción </button>
                </Col>
              </Row>
            :
            (subscription.status === 'past_due')?
              <Col xs={12} sm={8}>
                <p className="box__panel__subtitle">No tienes una suscripción activa</p>
                <p className="box__panel__text__info">Pausaste tu suscripción.</p>
              </Col>
            :
            (subscription.status === 'in_trial')?
              <Col xs={12} sm={8}>
                <p className="box__panel__subtitle">Estás en tu periodo de prueba</p>
                <p className="box__panel__text__info">Inicio el {moment.unix(subscription.trial_start).format('DD/MM/YYYY')} y termina el {moment.unix(subscription.trial_end).format('DD/MM/YYYY')}.</p>
                <p className="box__panel__text__info">Al terminar el periodo de prueba se hará un cobro de ${this.getMoneyPlan(subscription.plan_id)} mxn por concepto:</p>
                <p className="box__panel__text__info" id={'text__concept'}>Transacción plan tarjeta.id</p>
              </Col>
            :
            null
          }
          </div>
        </Col>
        {/*INFORMACION DE PAGO*/}
        <Col xs={12}>
          <p className="box__panel__title">INFORMACIÓN DE PAGO</p>
        </Col>
        <Col xs={12}>
          <div className="box__panel__content">
            <Row>
              <Col xs={12} sm={8}>
                <p className="box__panel__subtitle">{payment_sources.data[0].brand} terminación {payment_sources.data[0].last4}</p>
                <p className="text-muted box__panel__text__info">{payment_sources.data[0].exp_month}/{payment_sources.data[0].exp_year}</p>
              </Col>
            </Row>
          </div>
        </Col>
        {
          (this.state.changeCard)?
            <Col xs={12}>
            <div className="box__panel__content">
              <Row>
                <Col xs={12} sm={8}>
                  <input name="card_number" onChange={this._handleChange} value={this.state.card_number} type="text" className="form-control form-control-lg" placeholder="Número de tarjeta" />
                </Col>
                <Col xs={12} sm={8}>
                  <input name="card_month" onChange={this._handleChange} value={this.state.card_month} type="text" className="form-control form-control-lg" placeholder="mes" />
                </Col>
                <Col xs={12} sm={8}>
                  <input name="card_year" onChange={this._handleChange} value={this.state.card_year} type="text" className="form-control form-control-lg" placeholder="año" />
                </Col>

                <Col xs={12} sm={8}>
                  <input name="card_cvc" onChange={this._handleChange} value={this.state.card_cvc} type="text" className="form-control form-control-lg" placeholder="cvv" />
                </Col>
                <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">
                  <button onClick={()=> {this.changeInfoCard(subscription.customer_id)}} className="btn btn-primary box__plan_button__px mb-3 align-self-end">Aceptar</button>
                </Col>
              </Row>
            </div>
          </Col>
          : null

        }
        {/*CONFIGURACION DE LA CUENTA*/}
        <Col xs={12}>
          <p className="box__panel__title">DATOS DE TU CUENTA</p>
        </Col>
        <Col xs={12}>
          <div className="box__panel__content">
            <Row>
              <Col xs={12} sm={8}>
                <p className="box__panel__subtitle">{ conekta.name }</p>
                <p className="text-muted box__panel__text__info">{ conekta.email }</p>
                <p className="text-muted box__panel__text__info">{ conekta.phone }</p>
              </Col>
            </Row>
          </div>
        </Col>
      </div>
    )
  }

  makeDetailNotSuscription() {
    return (
      <>
        {/*SUSCRIPCIONES ACTIVAS*/}
        <Col xs={12}>
          <p className="box__panel__title">SUSCRIPCIÓN</p>
        </Col>
        <Col xs={12}>
          <div className="box__panel__content">
            <Row>
              <Col xs={12} sm={8}>
                <p className="box__panel__subtitle">SIN SUSCRIPCIÓN</p>
                <p className="box__panel__text__info">Para continuar con los beneficios de tarjeta.id es necesario que actives tu plan.</p>
              </Col>
              <Col xs={12} sm={4} className="d-flex flex-column justify-content-end">

                <button
                onClick={() => { this.activarMiTarjeta()  }}
                className="btn btn-primary box__plan_button__px__cancel align-self-end">Activar mi tarjeta.id</button>
              </Col>
            </Row>
          </div>
        </Col>
      </>
    )

  }

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

  changeCard() {
    this.setState({changeCard: !this.state.changeCard})
  }

  goToEditTarjeta() {
    const { app_id_s, arrData } = this.props.initState
    if (arrData.modalidad === 'mini') {
      window.location = `https://editor.tarjeta.id/?app_id_s=${app_id_s}`
    } else if(arrData.modalidad === 'plus') {
      window.location = `https://plus.tarjeta.id/?app_id_s=${app_id_s}`
    }
  }

  getTextPlan(id_plan) {
    if (id_plan === 'plan-plus-anual-30-dias') {
      return 'Plan plus anual 30 días gratis'
    } else if (id_plan === 'plan-basico-anual-30-dias') {
      return 'Plan básico anual 30 días gratis'
    } else if (id_plan === 'plan-basico-mensual-30-dias') {
      return 'Plan básico mensual 30 días gratis'
    } else if (id_plan === 'plan-plus-mensual-30-dias') {
      return 'Plan plus mensual 30 días gratis'
    } else if (id_plan === 'plan-plus-anual-20') {
      return 'Plan plus anual 20% descuento'
    } else if (id_plan === 'plan-plus-mensual-20') {
      return 'Plan plus mensual 20% descuento'
    } else if (id_plan === 'plan-basico-anual-20') {
      return 'Plan básico anual 20% descuento'
    } else if (id_plan === 'plan-basico-mensual-20') {
      return 'Plan básico mensual 20% descuento'
    } else if (id_plan === 'black_friday_basica_mensual') {
      return 'Plan básico mensual'
    } else if (id_plan === 'black_friday_basica_anual') {
      return 'Plan básico anual'
    } else if (id_plan === 'black_friday_plus_mensual') {
      return 'Plan plus mensual'
    } else if (id_plan === 'black_friday_plus_anual') {
      return 'Plan plus anual'
    } else if (id_plan === 'plan_plus_mensual') {
      return 'Plan plus mensual'
    } else if (id_plan === 'plan_plus_anual') {
      return 'Plan plus anual'
    } else if (id_plan === 'plan_basico_mensual') {
      return 'Plan básico mensual'
    } else if (id_plan === 'plan_basico_anual') {
      return 'Plan básico anual'
    } else if (id_plan === 'plan_plus_venta_invierno') {
      return 'Plan plus mensual venta de invierno'
    } else if (id_plan === 'plan_basico_venta_invierno') {
      return 'Plan básico mensual venta de invierno'
    } else if (id_plan === 'plan_plus_anual_venta_invierno') {
      return 'Plan plus anual venta de invierno'
    } else if (id_plan === 'plan_basico_anual_venta_invierno') {
      return 'Plan básico anual venta de invierno'
    } else if (id_plan === 'plan_mini_mensual_san_valentin') {
      return 'Plan básico mensual San Valentín'
    } else if (id_plan === 'plan_plus_mensual_san_valentin') {
      return 'Plan plus mensual San Valentín'
    } else if (id_plan === 'plan_mini_anual_san_valentin') {
      return 'Plan básico anual San Valentín'
    } else if (id_plan === 'plan_plus_anual_san_valentin') {
      return 'Plan plus anual San Valentín'
    } else if (id_plan === 'plan_mini_mensual_dia_naturaleza') {
      return 'Plan básico mensual Día de la Naturaleza'
    } else if (id_plan === 'plan_plus_mensual_dia_naturaleza') {
      return 'Plan plus mensual Día de la Naturaleza'
    } else if (id_plan === 'plan_mini_anual_dia_naturaleza') {
      return 'Plan básico anual Día de la Naturaleza'
    } else if (id_plan === 'plan_plus_anual_dia_naturaleza') {
      return 'Plan plus anual Día de la Naturaleza'
    } else if (id_plan === 'plan_mini_mensual_dia_tierra') {
      return 'Plan básico mensual Día de la Tierra'
    } else if (id_plan === 'plan_mini_anual_dia_tierra') {
      return 'Plan básico anual Día de la Tierra'
    } else if (id_plan === 'plan_plus_mensual_dia_tierra') {
      return 'Plan plus mensual Día de la Tierra'
    } else if (id_plan === 'plan_plus_anual_dia_tierra') {
      return 'Plan plus anual Día de la Tierra'
    } else if (id_plan === 'plan_mini_anual_dia_madre') {
      return 'Plan básico anual día de las madres'
    } else if (id_plan === 'plan_mini_mensual_dia_madre') {
      return 'Plan básico mensual día de las madres'
    } else if (id_plan === 'plan_plus_anual_dia_madre') {
      return 'Plan plus anual día de las madres'
    } else if (id_plan === 'plan_plus_mensual_dia_madre') {
      return 'Plan plus mensual día de las madres'
    } else if (id_plan === 'plan_mini_anual_dia_mundial_reciclaje') {
      return 'Plan básico anual día mundial del reciclaje'
    } else if (id_plan === 'plan_mini_mensual_dia_mundial_reciclaje') {
      return 'Plan básico mensual día mundial del reciclaje'
    } else if (id_plan === 'plan_plus_anual_dia_mundial_reciclaje') {
      return 'Plan plus anual día mundial del reciclaje'
    } else if (id_plan === 'plan_plus_mensual_dia_mundial_reciclaje') {
      return 'Plan plus mensual día mundial del reciclaje'
    } else if (id_plan === 'plan_mini_anual_hot_sale') {
      return 'Plan básico anual Hot Sale'
    } else if (id_plan === 'plan_mini_mensual_hot_sale') {
      return 'Plan básico mensual Hot Sale $99.00 x 99 días, después $99.00 al mes'
    } else if (id_plan === 'plan_plus_anual_hot_sale') {
      return 'Plan plus anual Hot Sale'
    } else if (id_plan === 'plan_plus_mensual_hot_sale') {
      return 'Plan plus mensual Hot Sale $124.00 x 99 días, después $124.00 al mes'
    } else if (id_plan === 'plan_mini_anual_dia_padre') {
      return 'Plan básico anual Día del Padre'
    } else if (id_plan === 'plan_mini_mensual_dia_padre') {
      return 'Plan básico mensual Día del Padre'
    } else if (id_plan === 'plan_plus_anual_dia_padre') {
      return 'Plan plus anual Día del Padre'
    } else if (id_plan === 'plan_plus_mensual_dia_padre') {
      return 'Plan plus mensual Día del Padre'
    } else if (id_plan === 'plan_plus_anual_dia_del_arbol') {
      return 'Plan plus anual Día del árbol'
    } else if (id_plan === 'plan_plus_mensual_dia_del_arbol') {
      return 'Plan plus mensual Día del árbol'
    } else if (id_plan === 'plan_mini_anual_dia_del_arbol') {
      return 'Plan mini anual Día del árbol'
    } else if (id_plan === 'plan_mini_mensual_dia_del_arbol') {
      return 'Plan mini mensual Día del árbol'


    } else if (id_plan === 'plan_mini_anual_agosto_sin_costo') {
      return 'Plan mini anual agosto sin costo'
    } else if (id_plan === 'plan_mini_mensual_agosto_sin_costo') {
      return 'Plan mini mensual agosto sin costo, 3 meses X $99.00, después $99.00 al mes'
    } else if (id_plan === 'plan_plus_anual_agosto_sin_costo') {
      return 'Plan plus anual agosto sin costo'
    } else if (id_plan === 'plan_plus_mensual_agosto_sin_costo') {
      return 'Plan plus mensual agosto sin costo, 3 meses X $149.00, después $149.00 al mes'


    } else if (id_plan === 'plan_mini_anual_dia_independencia') {
      return 'Plan mini anual Día de la independencia'
    } else if (id_plan === 'plan_mini_mensual_dia_independencia') {
      return 'Plan mini mensual Día de la independencia'
    } else if (id_plan === 'plan_plus_anual_dia_independencia') {
      return 'Plan plus anual Día de la independencia'
    } else if (id_plan === 'plan_plus_mensual_dia_independencia') {
      return 'Plan plus mensual Día de la independencia'

    } else if (id_plan === 'plan_mini_anual_dia_animales') {
      return 'Plan mini anual Día de los animales'
    } else if (id_plan === 'plan_mini_mensual_dia_animales') {
      return 'Plan mini mensual Día de los animales'
    } else if (id_plan === 'plan_plus_anual_dia_animales') {
      return 'Plan plus anual Día de los animales'
    } else if (id_plan === 'plan_plus_mensual_dia_animales') {
      return 'Plan plus mensual Día de los animales'

    } else if (id_plan === 'plan_mini_anual_halloween') {
      return 'Plan mini anual Halloween'
    } else if (id_plan === 'plan_mini_mensual_halloween') {
      return 'Plan mini mensual Halloween'
    } else if (id_plan === 'plan_plus_anual_halloween') {
      return 'Plan plus anual Halloween'
    } else if (id_plan === 'plan_plus_mensual_halloween') {
      return 'Plan plus mensual Halloween'

    } else if (id_plan === 'plan_mini_anual_dia_muertos') {
      return 'Plan mini anual Día de muertos'
    } else if (id_plan === 'plan_mini_mensual_dia_muertos') {
      return 'Plan mini mensual Día de muertos'
    } else if (id_plan === 'plan_plus_anual_dia_muertos') {
      return 'Plan plus anual Día de muertos'
    } else if (id_plan === 'plan_plus_mensual_dia_muertos') {
      return 'Plan plus mensual Día de muertos'
    } else if (id_plan === 'plan_mini_anual_buen_fin_2021') {
      return 'Plan mini anual Buen Fin'
    } else if (id_plan === 'plan_mini_mensual_buen_fin_2021') {
      return 'Plan mini mensual Buen Fin 99 días X $99.00, después $99.00 al mes'
    } else if (id_plan === 'plan_plus_anual_buen_fin_2021') {
      return 'Plan plus anual Buen Fin'
    } else if (id_plan === 'plan_plus_mensual_buen_fin_2021') {
      return 'Plan plus mensual Buen Fin 99 días X $149.00, después $149.00 al mes'
    } else if (id_plan === 'plan_mini_anual_black_friday_cyber_monday_2021') {
      return 'Plan mini anual Black Friday - Cyber Monday 2021'
    } else if (id_plan === 'plan_mini_mensual_black_friday_cyber_monday_2021') {
      return 'Plan mini mensual Black Friday - Cyber Monday 2021'
    } else if (id_plan === 'plan_plus_anual_black_friday_cyber_monday_2021') {
      return 'Plan plus anual Black Friday - Cyber Monday 2021'
    } else if (id_plan === 'plan_plus_mensual_black_friday_cyber_monday_2021') {
      return 'Plan plus mensual Black Friday - Cyber Monday 2021'

    } else if (id_plan === 'plan_mini_anual_navidad_2021') {
      return 'Plan mini anual - Promoción Navideña'
    } else if (id_plan === 'plan_mini_mensual_navidad_2021') {
      return 'Plan mini mensual - Promoción Navideña'
    } else if (id_plan === 'plan_plus_anual_navidad_2021') {
      return 'Plan plus anual - Promoción Navideña'
    } else if (id_plan === 'plan_plus_mensual_navidad_2021') {
      return 'Plan plus mensual - Promoción Navideña'
    } else {
      return ''
    }
  }

  getMoneyPlan(id_plan) {
    if (id_plan === 'plan-plus-anual-30-dias') {
      return '1499.00'
    } else if (id_plan === 'plan-basico-anual-30-dias') {
      return '999.00'
    } else if (id_plan === 'plan-basico-mensual-30-dias') {
      return '99.00'
    } else if (id_plan === 'plan-plus-mensual-30-dias') {
      return '149.00'
    } else if (id_plan === 'plan-plus-anual-20') {
      return '1199.00'
    } else if (id_plan === 'plan-plus-mensual-20') {
      return '129.00'
    } else if (id_plan === 'plan-basico-anual-20') {
      return '799.00'
    } else if (id_plan === 'plan-basico-mensual-20') {
      return '79.00'
    } else if (id_plan === 'black_friday_basica_mensual') {
      return '89.00'
    } else if (id_plan === 'black_friday_basica_anual') {
      return '899.00'
    } else if (id_plan === 'black_friday_plus_mensual') {
      return '119.00'
    } else if (id_plan === 'black_friday_plus_anual') {
      return '1359.00'
    } else if (id_plan === 'plan_plus_mensual') {
      return '149.00'
    } else if (id_plan === 'plan_plus_anual') {
      return '1499.00'
    } else if (id_plan === 'plan_basico_mensual') {
      return '99.00'
    } else if (id_plan === 'plan_basico_anual') {
      return '999.00'
    } else if (id_plan === 'plan_plus_venta_invierno') {
      return '149.00'
    } else if (id_plan === 'plan_basico_venta_invierno') {
      return '99.00'
    } else if (id_plan === 'plan_plus_anual_venta_invierno') {
      return '1199.00'
    } else if (id_plan === 'plan_basico_anual_venta_invierno') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_san_valentin') {
      return '89.00'
    } else if (id_plan === 'plan_plus_mensual_san_valentin') {
      return '134.00'
    } else if (id_plan === 'plan_mini_anual_san_valentin') {
      return '849.00'
    } else if (id_plan === 'plan_plus_anual_san_valentin') {
      return '1249.00'
    } else if (id_plan === 'plan_mini_mensual_dia_naturaleza') {
      return '84.00'
    } else if (id_plan === 'plan_plus_mensual_dia_naturaleza') {
      return '124.00'
    } else if (id_plan === 'plan_mini_anual_dia_naturaleza') {
      return '799.00'
    } else if (id_plan === 'plan_plus_anual_dia_naturaleza') {
      return '1199.00'
    } else if (id_plan === 'plan_mini_mensual_dia_tierra') {
      return '84.00'
    } else if (id_plan === 'plan_mini_anual_dia_tierra') {
      return '799.00'
    } else if (id_plan === 'plan_plus_mensual_dia_tierra') {
      return '124.00'
    } else if (id_plan === 'plan_plus_anual_dia_tierra') {
      return '1199.00'
    } else if (id_plan === 'plan_mini_anual_dia_madre') {
      return '849.00'
    } else if (id_plan === 'plan_mini_mensual_dia_madre') {
      return '89.00'
    } else if (id_plan === 'plan_plus_anual_dia_madre') {
      return '1249.00'
    } else if (id_plan === 'plan_plus_mensual_dia_madre') {
      return '134.00'
    } else if (id_plan === 'plan_mini_anual_dia_mundial_reciclaje') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_dia_mundial_reciclaje') {
      return '84.00'
    } else if (id_plan === 'plan_plus_anual_dia_mundial_reciclaje') {
      return '1199.00'
    } else if (id_plan === 'plan_plus_mensual_dia_mundial_reciclaje') {
      return '124.00'
    } else if (id_plan === 'plan_mini_anual_hot_sale') {
      return '749.00'
    } else if (id_plan === 'plan_mini_mensual_hot_sale') {
      return '99.00'
    } else if (id_plan === 'plan_plus_anual_hot_sale') {
      return '1149.00'
    } else if (id_plan === 'plan_plus_mensual_hot_sale') {
      return '149.00'
    } else if (id_plan === 'plan_mini_anual_dia_padre') {
      return '849.00'
    } else if (id_plan === 'plan_mini_mensual_dia_padre') {
      return '89.00'
    } else if (id_plan === 'plan_plus_anual_dia_padre') {
      return '1249.00'
    } else if (id_plan === 'plan_plus_mensual_dia_padre') {
      return '134.00'
    } else if (id_plan === 'plan_plus_anual_dia_del_arbol') {
      return '1199.00'
    } else if (id_plan === 'plan_plus_mensual_dia_del_arbol') {
      return '124.00'
    } else if (id_plan === 'plan_mini_anual_dia_del_arbol') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_dia_del_arbol') {
      return '84.00'


    } else if (id_plan === 'plan_mini_anual_agosto_sin_costo') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_agosto_sin_costo') {
      return '99.00'
    } else if (id_plan === 'plan_plus_anual_agosto_sin_costo') {
      return '1199.00'
    } else if (id_plan === 'plan_plus_mensual_agosto_sin_costo') {
      return '149.00'

    } else if (id_plan === 'plan_mini_anual_dia_independencia') {
      return '849.00'
    } else if (id_plan === 'plan_mini_mensual_dia_independencia') {
      return '89.00'
    } else if (id_plan === 'plan_plus_anual_dia_independencia') {
      return '1249.00'
    } else if (id_plan === 'plan_plus_mensual_dia_independencia') {
      return '134.00'

    } else if (id_plan === 'plan_mini_anual_dia_animales') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_dia_animales') {
      return '84.00'
    } else if (id_plan === 'plan_plus_anual_dia_animales') {
      return '1199.00'
    } else if (id_plan === 'plan_plus_mensual_dia_animales') {
      return '124.00'

    } else if (id_plan === 'plan_mini_anual_halloween') {
      return '849.00'
    } else if (id_plan === 'plan_mini_mensual_halloween') {
      return '89.00'
    } else if (id_plan === 'plan_plus_anual_halloween') {
      return '1249.00'
    } else if (id_plan === 'plan_plus_mensual_halloween') {
      return '134.00'

    } else if (id_plan === 'plan_mini_anual_dia_muertos') {
      return '849.00'
    } else if (id_plan === 'plan_mini_mensual_dia_muertos') {
      return '89.00'
    } else if (id_plan === 'plan_plus_anual_dia_muertos') {
      return '1249.00'
    } else if (id_plan === 'plan_plus_mensual_dia_muertos') {
      return '134.00'
    } else if (id_plan === 'plan_mini_anual_buen_fin_2021') {
      return '749.00'
    } else if (id_plan === 'plan_mini_mensual_buen_fin_2021') {
      return '99.00'
    } else if (id_plan === 'plan_plus_anual_buen_fin_2021') {
      return '1149.00'
    } else if (id_plan === 'plan_plus_mensual_buen_fin_2021') {
      return '149.00'
    } else if (id_plan === 'plan_mini_anual_black_friday_cyber_monday_2021') {
      return '799.00'
    } else if (id_plan === 'plan_mini_mensual_black_friday_cyber_monday_2021') {
      return '84.00'
    } else if (id_plan === 'plan_plus_anual_black_friday_cyber_monday_2021') {
      return '1199.00'
    } else if (id_plan === 'plan_plus_mensual_black_friday_cyber_monday_2021') {
      return '124.00'

    } else if (id_plan === 'plan_mini_anual_navidad_2021') {
      return '749.00'
    } else if (id_plan === 'plan_mini_mensual_navidad_2021') {
      return '79.00'
    } else if (id_plan === 'plan_plus_anual_navidad_2021') {
      return '1149.00'
    } else if (id_plan === 'plan_plus_mensual_navidad_2021') {
      return '119.00'
    } else {
      return '0.00'
    }
  }

};

export default withRouter(MainPage)