import { Button, Divider, Form, Input } from "antd";
import { RoomDetailsType } from "features/order/orderSlice";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProRatioGroups from "../ProRatioGroups/ProRatioGroups";

const { TextArea } = Input;

interface RoomBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
  initialValue: RoomDetailsType | null;
  onSave: (value: RoomDetailsType) => void;
}

export function RoomBottomSheet({
  isOpen,
  onClose,
  initialValue,
  onSave,
}: RoomBottomSheetProps) {
  const { t } = useTranslation();
  const [roomForm] = Form.useForm();
  useEffect(() => {
    roomForm.setFieldsValue(initialValue);
  }, [initialValue, roomForm]);

  const handleSave = () => {
    onSave(roomForm.getFieldsValue());
    roomForm.resetFields();
    onClose();
  };

  const handleCancel = () => {
    roomForm.setFieldsValue(initialValue);
    roomForm.resetFields();
    onClose();
  };

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("address.roomDetails")}
      showCloseButton={false}
      initialSnap={1}
      height={665}
      snapPoints={[665]}
    >
      <Form
        layout="vertical"
        style={{ marginTop: 12 }}
        name="roomForm"
        form={roomForm}
        initialValues={initialValue as RoomDetailsType}
      >
        <Form.Item
          name="roomNo"
          label={t("address.roomNo")}
          rules={[{ required: true, message: "" }]}
          colon={false}
        >
          <Input
            placeholder={t("address.roomNo")}
            size="large"
            style={{
              fontSize: 14,
              height: 50,
            }}
            autoFocus={false}
          />
        </Form.Item>{" "}
        <Form.Item
          name="floorNo"
          label={t("address.floorNo")}
          rules={[{ required: true, message: "" }]}
        >
          <Input
            placeholder={t("address.floorNo")}
            size="large"
            style={{
              fontSize: 14,
              height: 50,
              }}
            autoFocus={false}
          />
        </Form.Item>
        <Form.Item name="guestName" label={t("address.guestName")}>
          <Input
            placeholder={t("address.guestName")}
            size="large"
            style={{
              fontSize: 14,
              height: 50,
            }}
            autoFocus={false}
          />
        </Form.Item>
        <Form.Item name="note" label={t("address.note")}>
          <TextArea
            placeholder={t("address.addressLabel")}
            size="large"
            style={{
              fontSize: 14,
              borderRadius: 10,
            }}
            rows={2}
            autoFocus={false}
          />
        </Form.Item>
        <Divider />
        <Form.Item name="deliverWay">
          <ProRatioGroups
            options={[
              {
                label: t("address.pleaseKnockSoftly"),
                value: "pleaseKnockSoftly",
              },
              {
                label: t("address.deliverToRoom"),
                value: "deliverToRoom",
              },
            ]}
          />
        </Form.Item>
      </Form>

      <br />

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