import { Button } from "antd";
import { useCallback, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import styles from "../../address/address.module.css";
import useOrder from "../hooks/useOrder";

export default function CheckoutButton() {
  const { t } = useTranslation();
  const orderType = useMemo(() => localStorage.getItem("orderType"), []);
  const navigate = useNavigate();
  const { handleCreateOrder } = useOrder();
  const { id } = useParams();

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

  const handlePlaceOrderClick = useCallback(() => {
    handleCreateOrder();
  }, [handleCreateOrder]);

  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>
  );
}