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

const { TextArea } = Input;

interface SpecialRequestBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: string;
  onSave: (value: string) => void;
}

export function BottomSheet({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: SpecialRequestBottomSheetProps) {
  const { t } = useTranslation();
  const [value, setValue] = useState(initialValue);

  const handleSave = () => {
    onSave(value);
    onClose();
  };

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

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("cart.specialRequest")}
      showCloseButton={false}
      initialSnap={1}
      height={370}
      snapPoints={[370]}
    >
      <div>
        <div style={{ marginTop: 20 }}>
          <TextArea
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder={t("cart.specialRequest")}
            rows={6}
            size="middle"
            autoFocus={false}
          />
        </div>

        <br />

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