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";

interface CartFooterProps {
  form: FormInstance;
}

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

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

  return (
    <Layout.Footer className={styles.cartFooter}>
      <Link
        to={`/${subdomain}/menu?${orderType ? `orderType=${orderType}` : ""}`}
        style={{
          width: "100%",
        }}
      >
        <Button
          style={{
            borderRadius: 100,
            height: 50,
            borderColor: "black",
            width: "100%",
            fontSize: 16,
          }}
        >
          {t("cart.addItem")}
        </Button>
      </Link>

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