"use client"
import { ColoredHeart, OutlineHeart } from '@/assets/svgs/Icons';
import { toggleItemToFav } from '@/store/fav';
import { AppDispatch, RootState } from '@/store/store';
import { useTranslations } from 'next-intl';
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { showDynamicSwal } from '@/utils/helpers';


interface FavProps {
  product: any;
  className?: string;
  withText?: boolean;
  type?: "product" | "trader";
}


const FavBtn = ({product,className,withText,type}:FavProps) => {
      const [isFav, setIsFav] = useState(product?.id || false);
      // const [favId, setFavId] = useState(product?.is_favorite);
      const t = useTranslations();
      const dispatch = useDispatch<AppDispatch>(); 
      const favItems = useSelector((state: RootState) => state.favConfig.allFavItems);

      useEffect(() => {
        if (favItems.length > 0) {
          setIsFav(favItems.some((item: any) => item.id == product?.id));
          // const matchedItem = favItems.find((item: any) => item.id === product?.id && item.is_favorite);
          // setFavId(matchedItem?.is_favorite || null);
        }else if (!favItems.length && !product?.is_favorite){
          setIsFav(false)
        }
      }, [favItems, product?.id]);
    
      const handleToggleFav = async () => {
        if (isFav) {
          const result = await showDynamicSwal({
            title: t("Text.deleteFavorites"),
            text: t("Text.deleteFavoritesDesc"),
            confirmButtonText: t("buttons.ok"),
            cancelButtonText: t("buttons.noKeepMe"),
            customClass: {
              icon: "hidden-icon",
              title: "swal-title",
              confirmButton: "app-btn alert-btn",
              cancelButton: "app-btn outline-btn"
            },
          });
      
          if (result.isConfirmed) {
            const res = await dispatch(toggleItemToFav({ id:product?.id, method: "delete",type }));
            if (res.meta.requestStatus === "fulfilled") {
              setIsFav(false);
            }
          }
        } else {
          const res = await dispatch(toggleItemToFav({ id: product?.id, method: "add",type }));
          if (res.meta.requestStatus === "fulfilled") {
            setIsFav(true);
          }
        }
      };

  return (
    <button className={`product_fav_btn ${isFav === true ? 'active' : ''} ${className? className : ''} `} onClick={handleToggleFav} >
      {isFav === true ? <ColoredHeart/> :  <OutlineHeart/>}
      {withText ? t("buttons.addToWishList"):""}
    </button>
  )
}

export default FavBtn