"use client"
import { EditIcon, TrashIcon, } from "@/assets/svgs/Icons";
import {  Radio } from 'antd';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '@/store/store';
import { deleteItemFromAddress, getSelectedItem, toggleItemToDefault } from '@/store/address';
import MapImage from '@/assets/images/map-image.png';
import Swal from 'sweetalert2';
import { useTranslations } from 'next-intl';
import ImageWithFallback from '@/components/UiComponents/ImageWithFallback';

const AddressCard = ({ item }:any) => {
  const dispatch = useDispatch<AppDispatch>();
  const t = useTranslations();
  const changeDefault = async () => {
    dispatch(toggleItemToDefault({id:item?.id}))    
  };

  const handleDelete = async () => {
    const result = await Swal.fire({
      title: 'حذف العنوان',
      text: 'هل تريد بالفعل حذف هذا العنوان؟',
      iconHtml:` `,
      showConfirmButton:true,
      showCancelButton:true,
      showCloseButton:true,
      closeButtonHtml: `<div class="swal-close-btn"> x </div>`,
        customClass:{
        icon:"hidden-icon",
        title:"swal-title",
        confirmButton:"app-btn alert-btn",
        cancelButton:"app-btn outline-btn"
      },
      // showCancelButton: true,
      confirmButtonText: t("buttons.ok"),
      cancelButtonText:  t("buttons.noKeepMe") ,
    });

    if (result.isConfirmed) {
      dispatch(deleteItemFromAddress({id:item?.id , t}))
    }
  }
  
  const handleEdit = ()=>{
    dispatch(getSelectedItem({data:item , step:1 }))
  }

  return (
    <div className="address-card">
        <div className="min-w-[120px] inline-flex items-center ">
          <ImageWithFallback src={MapImage} alt='address-image' width={100} height={100} className='size-[100px] object-contain rounded-xl' />
        </div>
        <div className='flex-1'>
          <h4 className="font-semibold text-sm sm:text-base ">{item.type}</h4>
          <p className="text-gray-500 text-xs sm:text-sm font-medium line-clamp-1 max-w-[80%]">{item.address}</p>
          <div className="flex  items-start gap-2 mt-5">
            <button
              className="border border-solid border-platinum rounded-md p-1.5"
              onClick={handleEdit}
            >
                <EditIcon/>
            </button>
            <button onClick={handleDelete} className="border border-solid border-platinum rounded-md p-1.5"><TrashIcon/></button>
          </div>
          
        </div>
          <div className='toggle-btn' onClick={()=>changeDefault()}>
            <Radio id='is_default' name='is_default' checked={item?.is_default}/>
            {item?.is_default ? <p> {t("address.default_address")}</p> : <span></span>}
          </div>
    </div>
  );
};

export default AddressCard;