import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import { useTranslation } from "react-i18next";
import { Button } from "antd";
import styles from "./GiftAmountCard.module.css";
import ArabicPrice from "components/ArabicPrice";
import ProText from "components/ProText";
import EditIcon from "components/Icons/EditIcon";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { updateGiftDetails } from "features/order/orderSlice";
import { useState, useEffect, useMemo } from "react";

export default function GiftAmountCard({ onOpen }: { onOpen: () => void }) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { giftDetails } = useAppSelector((state) => state.order);
  const [selectedAmount, setSelectedAmount] = useState<number | null>(null);

  useEffect(() => {
    const amount = giftDetails?.amount;
    if (amount === 10 || amount === 20 || amount === 30) {
      setSelectedAmount(amount);
    } else {
      setSelectedAmount(null);
    }
  }, [giftDetails?.amount]);

  const handleAmountClick = (amount: number) => {
    setSelectedAmount(amount);
    dispatch(updateGiftDetails({ amount }));
  };

  const isDefaultAmount = useMemo(() => {
    const amount = giftDetails?.amount;
    return amount === 10 || amount === 20 || amount === 30;
  }, [giftDetails?.amount]);

  return (
    <ProInputCard title={t("cardDetails.eCardAmount")}>
      <div className={styles.customerInformationCard}>
        <Button
          onClick={() => handleAmountClick(10)}
          style={{
            borderRadius: 100,
            height: 40,
            border: "none",
            backgroundColor:
              selectedAmount === 10 && isDefaultAmount
                ? "#FFB7001F"
                : "#5F6C7B0D",
          }}
        >
          <ArabicPrice
            price={10.0}
            textStyle={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              textAlign: "center",
              color:
                selectedAmount === 10 && isDefaultAmount
                  ? "#CC9300"
                  : "#5F6C7B",
            }}
          />
        </Button>
        <Button
          onClick={() => handleAmountClick(20)}
          style={{
            borderRadius: 100,
            height: 40,
            border: "none",
            backgroundColor:
              selectedAmount === 20 && isDefaultAmount
                ? "#FFB7001F"
                : "#5F6C7B0D",
          }}
        >
          <ArabicPrice
            price={20.0}
            textStyle={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              textAlign: "center",
              color:
                selectedAmount === 20 && isDefaultAmount
                  ? "#CC9300"
                  : "#5F6C7B",
            }}
          />
        </Button>
        <Button
          onClick={() => handleAmountClick(30)}
          style={{
            borderRadius: 100,
            height: 40,
            border: "none",
            backgroundColor:
              selectedAmount === 30 && isDefaultAmount
                ? "#FFB7001F"
                : "#5F6C7B0D",
          }}
        >
          <ArabicPrice
            price={30.0}
            textStyle={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              textAlign: "center",
              color:
                selectedAmount === 30 && isDefaultAmount
                  ? "#CC9300"
                  : "#5F6C7B",
            }}
          />
        </Button>
      </div>
      <Button
        style={{
          marginTop: 16,
          borderRadius: 100,
          width: "100%",
          height: 40,
          border: "none",
          backgroundColor:
            giftDetails?.amount && !isDefaultAmount ? "#FFB7001F" : "#030014",
        }}
        icon={
          giftDetails?.amount && !isDefaultAmount ? (
            <EditIcon
              className={styles.editIcon}
              color={
                giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF"
              }
            />
          ) : undefined
        }
        iconPlacement="start"
        onClick={onOpen}
      >
        <ProText
          style={{
            color: giftDetails?.amount && !isDefaultAmount ? "#CC9300" : "#FFF",
            fontWeight: 500,
            fontStyle: "Medium",
            fontSize: 14,
            lineHeight: "140%",
            letterSpacing: "0%",
            textAlign: "center",
          }}
        >
          {giftDetails?.amount && !isDefaultAmount
            ? giftDetails?.amount
            : t("cardDetails.costumeAmount")}
        </ProText>
      </Button>
    </ProInputCard>
  );
}
