import { colors } from "ThemeConstants.ts";
import { Button, FormInstance, message, Layout } from "antd";
import { selectCart } from "features/order/orderSlice.ts";
import { useTranslation } from "react-i18next";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks.ts";
import styles from "./footer.module.css";
import { OrderType } from "pages/checkout/hooks/types";

interface CartFooterProps {
  form: FormInstance;
}

export default function CartFooter({ form }: CartFooterProps) {
  const { t } = useTranslation();
  const { items, orderType } = useAppSelector(selectCart);
  const { subdomain } = useParams();
  const navigate = useNavigate();

  const handleCheckoutClick = async () => {
    if (items.length === 0) message.warning(t("cart.pleaseAddItemsToCart"));
    else {
      try {
        await form.validateFields();
        if (orderType === OrderType.Gift) {
          navigate(`/${subdomain}/e-gift-cards`);
        } else {
          navigate(`/${subdomain}/checkout`);
        }
      } catch (error) {
        message.warning(t("cart.checkRequiredFields"));
        console.log("Form validation failed:", error);
      }
    }
  };

  return (
    <Layout.Footer className={styles.cartFooter}>
      <Button
        style={{
          backgroundColor: colors.primary,
          borderRadius: 100,
          height: 50,
          borderColor: "#F2F2F2",
          fontSize: 16,
          color: "white",
          width: "100%",
        }}
        onClick={handleCheckoutClick}
      >
        {orderType === OrderType.Gift
          ? t("cart.continueToGiftDetails")
          : t("cart.checkout")}
      </Button>
    </Layout.Footer>
  );
}
