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.payAsCustomAmount")}
            </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.divideTheBillEqually")}
            </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.payForYourItems")}
            </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)}
    />
    </>
  );
}