import { Button, Form, InputNumber } from "antd";
import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
import { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";

import {
  selectCart,
  selectGrandTotal,
  updateSplitBillAmount,
} from "features/order/orderSlice";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProInputCard from "components/ProInputCard/ProInputCard";

interface SplitBillChoiceBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  onSave?: (value: string) => void;
  onRemoveSplitWay?: () => void;
}

export function CustomAmountChoiceBottomSheet({
  isOpen,
  onClose,
  onRemoveSplitWay,
}: SplitBillChoiceBottomSheetProps) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { splitBillAmount } = useAppSelector(selectCart);
  const grandTotal = useAppSelector(selectGrandTotal);
  const [amount, setAmount] = useState<string>(
    splitBillAmount > 0 ? splitBillAmount.toString() : "",
  );

  useEffect(() => {
    if (isOpen && splitBillAmount > 0) {
      setAmount(splitBillAmount.toString());
    }
  }, [isOpen, splitBillAmount]);

  const handleSave = () => {
    const numAmount = parseFloat(amount) || 0;
    dispatch(updateSplitBillAmount(numAmount));
    onClose();
  };

  const handleRemoveSplitWay = () => {
    setAmount("");
    dispatch(updateSplitBillAmount(0));
    onRemoveSplitWay?.();
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("splitBill.payAsCustomAmount")}
      showCloseButton={true}
      initialSnap={1}
      height={400}
      snapPoints={[400]}
    >
      <div
        style={{
          padding: "20px 0",
          display: "flex",
          flexDirection: "column",
          gap: 20,
        }}
      >
        <div>
          <ProInputCard title={t("splitBill.payAsCustomAmount")}>
            <Form.Item
              label={t("splitBill.amount")}
              name="amount"
              style={{ position: "relative", top: -5 }}
            >
              <InputNumber
                value={amount}
                onChange={(value) => setAmount(value?.toString() || "")}
                placeholder={t("splitBill.amount")}
                max={grandTotal.toString()}
                min={"0"}
                style={{ width: "100%", fontSize:"1rem" }}
              />
            </Form.Item>
          </ProInputCard>
        </div>

        <div
          style={{
            display: "flex",
            gap: 12,
            marginTop: 20,
          }}
        >
          <Button style={{ flex: 1 }} onClick={handleRemoveSplitWay}>
            {t("splitBill.removeSplitWay")}
          </Button>
          <Button
            type="primary"
            style={{ flex: 1, boxShadow: "none" }}
            onClick={handleSave}
            disabled={!amount || parseFloat(amount) <= 0}
          >
            {t("cart.save")}
          </Button>
        </div>
      </div>
    </ProBottomSheet>
  );
}