import { Button, Input, InputNumber } from "antd";
import WaiterRewardingIcon from "components/Icons/waiter/WaiterRewardingIcon";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import { updateTip } from "features/order/orderSlice";
import { useAppDispatch } from "redux/hooks";
import ProText from "components/ProText";

interface TipBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: string;
}

export function TipBottomSheet({
  isOpen,
  onClose,
  initialValue,
}: TipBottomSheetProps) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const handleSave = () => {
    const numAmount = parseFloat(value) || 0;
    dispatch(updateTip(numAmount.toString()));
    onClose();
  };

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

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("cart.tip")}
      initialSnap={1}
      height={380}
      snapPoints={[380]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 10,
        }}
      >
        <div style={{ marginTop: 20 }}>
          <WaiterRewardingIcon />
        </div>

        <ProText
          style={{
            fontWeight: 400,
            fontStyle: "Regular",
            fontSize: 16,
            lineHeight: "140%",
            letterSpacing: "0%",
            color: "#333333",
            textAlign: "left",
            width: "100%",
          }}
        >
          {t("cart.amount")}
        </ProText>

        <InputNumber
          value={value}
          onChange={(value) => setValue(value?.toString() || "")}
          placeholder={t("cart.amount")}
          autoFocus={false}
          size="large"
          style={{ height: 48, width: "100%", marginBottom: 8 }}
          min={"0"}
        />

        <Button
          type="primary"
          style={{ width: "100%", height: 48 }}
          onClick={handleSave}
          disabled={value === "" || parseFloat(value) <= 0}
        >
          {t("cart.addTip")}
        </Button>
      </div>
    </ProBottomSheet>
  );
}
