import React, { useEffect, useState } from 'react';
import { IonContent, IonHeader, IonPage, IonRow, IonCol, IonTitle, IonToolbar } from '@ionic/react';
import bg3 from '../../assets/bg3.png';
import namelogo from '../../assets/namelogo.png';
import back from '../../assets/back.png';
import dump from '../../assets/dump.png';
import add from '../../assets/add.png';
import { useHistory, useLocation } from 'react-router-dom';
import { useIonViewWillEnter } from "@ionic/react"

import $ from 'jquery';
const MyCards: React.FC = () => {

    const [cards, setCards] = useState<any>([]); 
    const history = useHistory();
    const gotocard = () => {
        history.push('/card');
    }

    const del = (id) => {
        //confirm
        if (!window.confirm("¿Está seguro de que desea eliminar esta tarjeta?")) {
            return;
        }

        $.getJSON(localStorage.apiurl,{
            id_cliente: localStorage.getItem('id_cliente'),
            op: 'delcdxcards',
            id: id
        },(data)=>{
          console.log(data)
            getCards();
        })

    }

    const gotohome = () => {
       window.history.back();
    }


    useIonViewWillEnter(() => {
        getCards();
    });


    const getCards = () => {
        $.getJSON(localStorage.apiurl,{
            id_cliente: localStorage.getItem('id_cliente'),
            op: 'showcdxcards'
        },(data)=>{
          console.log(data)
            setCards(data);
        })
    }



   return (
  <IonPage>
    <div className="v2_subpage_wrap">
      <div className="logincontainer">

        {/* HEADER */}
        <div className="v2_subpage_header v2_animate_in">
          <p className="v2_section_title">Métodos de Pago</p>
          <div className="v2_back_btn" onClick={gotohome}>
            <img src={back} alt="back" />
          </div>
        </div>

        {/* TITLE ROW */}
        <div className="v2_section_title_row v2_animate_in" style={{ animationDelay: '0.06s' }}>
          <p style={{ fontSize: "14px", color: 'var(--v2-text2)', margin: 0 }}>
            Agrega tus tarjetas y métodos de pago
          </p>
          <div className="v2_add_btn" onClick={gotocard}>
            <img src={add} alt="agregar" />
          </div>
        </div>

        {/* CARDS LIST */}
        <div className="v2_addr_list">
          {cards.length === 0 ? (
            <div className="v2_empty_state v2_animate_in" style={{ animationDelay: '0.1s' }}>
              <span className="v2_empty_icon">💳</span>
              <p className="v2_empty_text">Aún no tienes métodos de pago guardados</p>
            </div>
          ) : (
            cards.map((x, index) => (
              <div
                key={index}
                className="v2_addr_card"
                style={{ animationDelay: `${0.08 + index * 0.05}s` }}
              >
                <div className="v2_addr_card_left">
                  <div className="v2_addr_icon">💳</div>
                  <p className="v2_addr_text">{x.maskedcard}</p>
                </div>
                <div className="v2_addr_delete_btn" onClick={() => del(x.id)}>
                  <img src={dump} alt="eliminar" />
                </div>
              </div>
            ))
          )}
        </div>

      </div>
    </div>
  </IonPage>
);
};

export default MyCards;