import { Button, FormInstance, Layout } from "antd";
import { selectCart, updateSplitBillAmount } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types.ts";
import useOrder from "pages/checkout/hooks/useOrder";
import { useCallback, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "../../address/address.module.css";
import { CustomAmountChoiceBottomSheet } from "./splitBill/CustomAmountChoiceBottomSheet";
import { EqualltyChoiceBottomSheet } from "./splitBill/EqualltyChoiceBottomSheet";
import { PayForYourItemsChoiceBottomSheet } from "./splitBill/PayForYourItemsChoiceBottomSheet";
import { SplitBillChoiceBottomSheet } from "./splitBill/SplitBillChoiceBottomSheet";

type SplitWay = "customAmount" | "equality" | "payForItems" | null;

export default function PayButton({ form }: { form: FormInstance }) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { orderType } = useAppSelector(selectCart);
  const { handleCreateOrder } = useOrder();
  const [selectedSplitWay, setSelectedSplitWay] = useState<SplitWay>(null);
  const [
    isSplitBillChoiceBottomSheetOpen,
    setIsSplitBillChoiceBottomSheetOpen,
  ] = useState(false);
  const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
  const [isEqualityOpen, setIsEqualityOpen] = useState(false);
  const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);

  const handleSplitBillClick = useCallback(() => {
    if (selectedSplitWay === "customAmount") {
      setIsCustomAmountOpen(true);
    } else if (selectedSplitWay === "equality") {
      setIsEqualityOpen(true);
    } else if (selectedSplitWay === "payForItems") {
      setIsPayForItemsOpen(true);
    } else {
      setIsSplitBillChoiceBottomSheetOpen(true);
    }
  }, [selectedSplitWay]);

  const handleRemoveSplitWay = useCallback(() => {
    setSelectedSplitWay(null);
    dispatch(updateSplitBillAmount(0));
  }, [dispatch]);

  const getSplitButtonTitle = useMemo(() => {
    if (selectedSplitWay === "customAmount") {
      return t("splitBill.payAsCustomAmount");
    } else if (selectedSplitWay === "equality") {
      return t("splitBill.divideTheBillEqually");
    } else if (selectedSplitWay === "payForItems") {
      return t("splitBill.payForYourItems");
    }
    return t("checkout.splitBill");
  }, [selectedSplitWay, t]);

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

  const shouldShowSplitBill = useMemo(
    () => orderType === OrderType.DineIn || orderType === OrderType.Pay,
    [orderType],
  );

  return (
    <>
      <Layout.Footer className={styles.checkoutButtonContainer}>
        {shouldShowSplitBill && (
          <Button
            className={styles.splitBillButton}
            onClick={handleSplitBillClick}
          >
            {getSplitButtonTitle}
          </Button>
        )}

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

      <SplitBillChoiceBottomSheet
        isOpen={isSplitBillChoiceBottomSheetOpen}
        onClose={() => setIsSplitBillChoiceBottomSheetOpen(false)}
        onSelectSplitWay={setSelectedSplitWay}
      />

      <CustomAmountChoiceBottomSheet
        isOpen={isCustomAmountOpen}
        onClose={() => {
          setIsCustomAmountOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />

      <EqualltyChoiceBottomSheet
        isOpen={isEqualityOpen}
        onClose={() => {
          setIsEqualityOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />

      <PayForYourItemsChoiceBottomSheet
        isOpen={isPayForItemsOpen}
        onClose={() => {
          setIsPayForItemsOpen(false);
        }}
        onRemoveSplitWay={handleRemoveSplitWay}
      />
    </>
  );
}