import { Card, Divider, Image } from "antd";
import { EGiftCard } from "../type";
import { useGetEGiftCardsQuery } from "redux/api/others";
import LoadingSpinner from "components/LoadingSpinner/LoadingSpinner";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { updateGiftDetails } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
import { useNavigate, useParams } from "react-router-dom";

export default function ECardList() {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();
  const { subdomain } = useParams();
  const { data: eGiftCards, isLoading } = useGetEGiftCardsQuery();
  const { t } = useTranslation();
  console.log(eGiftCards);
  const handleCardClick = (id: number) => {
    dispatch(updateGiftDetails({ cardId: id.toString() }));
    navigate(`/${subdomain}/card-details`);
  };

  if (isLoading) {
    return <LoadingSpinner />;
  }

  return (
    <Card style={{ textAlign: "center" }}>
      <div style={{ paddingBottom: 12 }}>
        <ProText
          style={{
            fontSize: 16,
            fontWeight: 600,
            color: "#333333",
          }}
        >
          {t("eGiftCards.pickCardForYourGift")}
        </ProText>
      </div>
      <ProText
        style={{
          fontFamily: "Outfit",
          fontWeight: 400,
          fontStyle: "Regular",
          fontSize: 14,
          lineHeight: "140%",
          letterSpacing: 0,
          textAlign: "center",
          color: "#95949C",
        }}
      >
        {t("eGiftCards.chooseDesignToMatchTheOccasion")}
      </ProText>
      <Divider style={{ margin: "12px 0 16px 0" }} />
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          padding: "8px",
          placeItems: "center",
          gap: "8px",
        }}
      >
        {eGiftCards?.map((card: EGiftCard) => (
          <Image
            src={card.imageURL}
            alt={card.image}
            width={135}
            height={88}
            preview={false}
            onClick={() => handleCardClick(card.id)}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
              borderRadius: 8,
            }}
          />
        ))}
      </div>
    </Card>
  );
}