import { Divider, Switch, Tag } from "antd";
import ProInputCard from "components/ProInputCard/ProInputCard";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import styles from "./VoucherBalanceCard.module.css";
import { useNavigate, useParams } from "react-router-dom";
import CardAmountIcon from "components/Icons/CardAmountIcon";
import ArabicPrice from "components/ArabicPrice";
import { useGetRedeemDetailsQuery } from "redux/api/others";

export function VoucherBalanceCard() {
  const { t } = useTranslation();

  const navigate = useNavigate();
  const { voucherId } = useParams();
  const { data: redeemDetails } = useGetRedeemDetailsQuery(voucherId || "", {
    skip: !voucherId,
  });
  return (
    <>
      <ProInputCard
        title={t("redeem.voucherBalance")}
        titleRight={
          <Tag
            style={{
              height: 23,
              textAlign: "center",
              opacity: 1,
              paddingRight: 10,
              paddingLeft: 10,
              borderRadius: 100,
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 12,
              lineHeight: "140%",
              letterSpacing: "0%",
              cursor: "pointer",
              backgroundColor: "#FFF9E6",
              color: "#B58D00",
            }}
          >
            {t("redeem.pending")}
          </Tag>
        }
      >
        <div className={styles.orderNotes}>
          <div
            style={{
              height: 42,
              width: 64,
              backgroundColor: "var(--background)",
              borderRadius: 8,
            }}
          >
            <CardAmountIcon />
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              width: "100%",
            }}
          >
            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#777580",
              }}
            >
              {t("redeem.yourGiftCardBalance")}
            </ProText>

            <ProText
              style={{
                fontWeight: 500,
                fontStyle: "Medium",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                color: "#333333",
              }}
            >
              <ArabicPrice price={redeemDetails?.gift?.amount || 0} />
            </ProText>
          </div>
          <Switch />
        </div>

        <Divider style={{ margin: "10px 0" }} />
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
          }}
        >
          <ProText
            style={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 14,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#777580",
              cursor: "pointer",
            }}
          >
            {t("redeem.voucherWillBeAppliedAtCheckout")}
          </ProText>
        </div>
      </ProInputCard>
    </>
  );
}