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"
const Myaddress: React.FC = () => {

    const [addresses, setAddresses] = useState<any>([]); 
    const history = useHistory();
    const gotoaddaddr = () => {
        history.push('/addaddress');
    }

    const del = (key) => {
        const newAddresses = addresses.filter((x, index) => index !== key);
        setAddresses(newAddresses);
        localStorage.setItem('savedAddress', JSON.stringify(newAddresses));
    }

    const gotohome = () => {
        history.push('/home');
    }

    useIonViewWillEnter(() => {
        if (!localStorage.getItem('savedAddress')) {
            localStorage.setItem('savedAddress', JSON.stringify([]));
        } else {
            console.log(localStorage.getItem('savedAddress'));
            setAddresses(JSON.parse(localStorage.getItem('savedAddress')));
        }

    });

    useEffect(() => {
        console.log("EL ADDRESS ES");
        console.log(addresses);
    }, [addresses]);



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

        {/* HEADER */}
        <div className="v2_subpage_header v2_animate_in">
                <p className="v2_section_title">Mis Direcciones</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"}}>Agrega tus direcciones mas frecuentes aqui</p>
          <div className="v2_add_btn" onClick={gotoaddaddr}>
          
            <img src={add} alt="agregar" />
          </div>
        </div>

        {/* ADDRESS LIST */}
        <div className="v2_addr_list">
          {addresses.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 direcciones guardadas</p>
            </div>
          ) : (
            addresses.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.direccion}</p>
                </div>
                <div className="v2_addr_delete_btn" onClick={() => del(index)}>
                  <img src={dump} alt="eliminar" />
                </div>
              </div>
            ))
          )}
        </div>

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


};

export default Myaddress;