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

import {
  selectCart,
  selectGrandTotal,
  updateGiftDetails,
  updateSplitBillAmount,
} from "features/order/orderSlice";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProText from "components/ProText";
import { ProInputNumber } from "components/Inputs/ProInputNumber";

interface SplitBillChoiceBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

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

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

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("cardDetails.customAmount")}
      showCloseButton={true}
      initialSnap={1}
      height={295}
      snapPoints={[295]}
      contentStyle={{
        padding: 0,
      }}
    >
      <div
        style={{
          padding: "20px 20px 0 20px",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <ProText
            style={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 16,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#333333",
            }}
          >
            {t("cardDetails.enterCustomOucherAmount")}
          </ProText>
          <Form.Item name="amount">
            <ProInputNumber
              value={amount}
              onChange={(value) => {
                setAmount(value?.toString() || "");
                dispatch(updateGiftDetails({ amount: Number(value) || 0 }));
              }}
              placeholder={t("cardDetails.amount")}
              min={0}
            />
          </Form.Item>
          <ProText
            style={{
              fontWeight: 500,
              fontStyle: "Medium",
              fontSize: 12,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#B1B0B6",
            }}
          >
            {t("cardDetails.minimumAmountShouldBe1OMR")}
          </ProText>
        </div>
      </div>

      <div
        style={{
          display: "flex",
          gap: 12,
          margin: 20,
        }}
      >
        <Button
          type="primary"
          style={{
            flex: 1,
            boxShadow: "none",
            height: 48,
          }}
          onClick={handleSave}
          disabled={!amount || parseFloat(amount) <= 0}
        >
          {t("cardDetails.add")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}