import { Card } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useState } from "react";
import { useTranslation } from "react-i18next";

import BackIcon from "components/Icons/BackIcon";
import NextIcon from "components/Icons/NextIcon";
import ProTitle from "components/ProTitle";
import { useAppSelector } from "redux/hooks";
import { CustomAmountChoiceBottomSheet } from "./CustomAmountChoiceBottomSheet";
import { EqualltyChoiceBottomSheet } from "./EqualltyChoiceBottomSheet";
import { PayForYourItemsChoiceBottomSheet } from "./PayForYourItemsChoiceBottomSheet";
import styles from "./SplitBill.module.css";

interface SplitBillChoiceBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSave?: (value: string) => void;
  onSelectSplitWay?: (way: "customAmount" | "equality" | "payForItems") => void;
}

export function SplitBillChoiceBottomSheet({
  isOpen,
  onClose,
  onSelectSplitWay,
}: SplitBillChoiceBottomSheetProps) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);

  const [isCustomAmountOpen, setIsCustomAmountOpen] = useState(false);
  const [isEqualityOpen, setIsEqualityOpen] = useState(false);
  const [isPayForItemsOpen, setIsPayForItemsOpen] = useState(false);

  const handleCancel = () => {
    onClose();
  };

  const handleCustomAmountClick = () => {
    onSelectSplitWay?.("customAmount");
    onClose();
    setIsCustomAmountOpen(true);
  };

  const handleEqualityClick = () => {
    onSelectSplitWay?.("equality");
    onClose();
    setIsEqualityOpen(true);
  };

  const handlePayForItemsClick = () => {
    onSelectSplitWay?.("payForItems");
    onClose();
    setIsPayForItemsOpen(true);
  };

  return (
    <>
      <ProBottomSheet
        isOpen={isOpen}
        onClose={handleCancel}
        title={t("splitBill.title")}
        showCloseButton={false}
        initialSnap={1}
        height={290}
        snapPoints={[290]}
      >
        <div
          style={{
            marginTop: 20,
            display: "flex",
            flexDirection: "column",
            gap: 10,
          }}
        >
          <Card
            className={styles.backToHomePage}
            onClick={handleCustomAmountClick}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                marginTop: 1,
              }}
            >
              <ProTitle
                level={5}
                style={{
                  fontSize: 14,
                }}
              >
                {t("splitBill.customAmount")}
              </ProTitle>

              {isRTL ? (
                <BackIcon className={styles.serviceIcon} />
              ) : (
                <NextIcon className={styles.serviceIcon} />
              )}
            </div>
          </Card>

          <Card className={styles.backToHomePage} onClick={handleEqualityClick}>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                marginTop: 1,
              }}
            >
              <ProTitle
                level={5}
                style={{
                  fontSize: 14,
                }}
              >
                {t("splitBill.divideEqually")}
              </ProTitle>

              {isRTL ? (
                <BackIcon className={styles.serviceIcon} />
              ) : (
                <NextIcon className={styles.serviceIcon} />
              )}
            </div>
          </Card>

          <Card
            className={styles.backToHomePage}
            onClick={handlePayForItemsClick}
          >
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                marginTop: 1,
              }}
            >
              <ProTitle
                level={5}
                style={{
                  fontSize: 14,
                }}
              >
                {t("splitBill.payForItems")}
              </ProTitle>

              {isRTL ? (
                <BackIcon className={styles.serviceIcon} />
              ) : (
                <NextIcon className={styles.serviceIcon} />
              )}
            </div>
          </Card>
        </div>
      </ProBottomSheet>

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

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

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