import { Button, FormInstance } from "antd";
import { selectCart } from "features/order/orderSlice";
import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import useOrder from "../hooks/useOrder";

export default function CheckoutButton({ form }: { form: FormInstance }) {
  const { t } = useTranslation();
  const { orderType } = useAppSelector(selectCart)
  const navigate = useNavigate();
  const { handleCreateOrder } = useOrder();
  const { id } = useParams();

  const handleSplitBillClick = useCallback(() => {
    navigate(`/${id}/split-bill`);
  }, [navigate, id]);

  const handlePlaceOrderClick = useCallback(async () => {
    try {
      await form.validateFields();
      handleCreateOrder();
    } catch (error) {
      console.log(error);
    }
  }, [handleCreateOrder, form]);

  const shouldShowSplitBill = useMemo(
    () => orderType === "dine-in",
    [orderType],
  );

  return (
    <div className={styles.checkoutButtonContainer}>
      {shouldShowSplitBill && (
        <Button
          className={styles.splitBillButton}
          onClick={handleSplitBillClick}
        >
          {t("checkout.splitBill")}
        </Button>
      )}

      <Button
        type="primary"
        shape="round"
        className={styles.placeOrderButton}
        onClick={handlePlaceOrderClick}
      >
        {t("checkout.placeOrder")}
      </Button>
    </div>
  );
}
