web-menu-react-version-/src/components/CustomBottomSheet/OfficeBottomSheet.tsx

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

const { TextArea } = Input;

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

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

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

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

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={handleCancel}
      title={t("address.officeDetails")}
      showCloseButton={false}
      initialSnap={1}
      height={"90vh"}
      snapPoints={["90vh"]}
    >
      <Form
        layout="vertical"
        style={{ marginTop: 12 }}
        name="officeForm"
        form={officeForm}
        initialValues={initialValue as OfficeDetailsType}
      >
        <Form.Item
          name="company"
          label={t("address.company")}
          rules={[{ required: true, message: "" }]}
          colon={false}
        >
          <Input
            placeholder={t("address.company")}
            size="large"
            style={{
              fontSize: 14,
            }}
            autoFocus={false}
          />
        </Form.Item>
        <Form.Item
          name="officeNo"
          label={t("address.officeNo")}
          rules={[{ required: true, message: "" }]}
          colon={false}
        >
          <Input
            placeholder={t("address.officeNo")}
            size="large"
            style={{
              fontSize: 14,
            }}
            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,
            }}
            autoFocus={false}
          />
        </Form.Item>
        <Form.Item name="contact" label={t("address.contactPerson")}>
          <Input
            placeholder={t("address.contactPerson")}
            size="large"
            style={{
              fontSize: 14,
            }}
            autoFocus={false}
          />
        </Form.Item>
        <Form.Item name="phone" label={t("address.phone")}>
          <Input
            placeholder={t("address.phone")}
            size="large"
            style={{
              fontSize: 14,
            }}
            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>
      </Form>

      <br />

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