// import React,{useEffect,useState} from "react";
// import { Form, Input, Modal, Select } from "antd";

// export const PulsaModal =  ({ visible, onCreate, onCancel, initialData }) => {
//   const [form] = Form.useForm();
//   const { Option } = Select;
// const [visibleModal, setVisibleModal] = useState(false)
//   const [initialData, setInitialData] = useState({})
//   const [confirmLoading, setConfirmLoading] = useState(false);
//   const [isLoading, setIsLoading] = useState(false);
//   useEffect(() => {
//     const init = async () => {
//       try {
//         setIsLoading(true);
//         await store.categories.getData();
//         setIsLoading(false);
//       } catch (e) {
//         setIsLoading(false);
//       }
//     };

//     init();
//   }, []);

//   return (
//     <Modal
//     visible={visibleModal}
//                          confirmLoading={confirmLoading}
//                          initialData={initialData}
//                          onCreate={async (data) => {
//                            onSubmit(data)
//                          }}
//                          onCancel={() => {
//                            setInitialData({})
//                            setVisibleModal(false);
//                          }}
//       visible={visible}
//       title={initialData.id ? "Edit Member" : "Create a new Member"}
//       okText={initialData.id ? "Edit" : "Create"}
//       cancelText="Cancel"
//       onCancel={() => {
//         form.resetFields();
//         onCancel();
//       }}
//       onOk={() => {
//         form
//           .validateFields()
//           .then((values) => {
//             onCreate(values);
//             form.resetFields();
//           })
//           .catch((info) => {
//             console.log("Validate Failed:", info);
//           });
//       }}
//     >
//       <Form
//         form={form}
//         layout="vertical"
//         name="form_in_modal"
//         initialValues={initialData}
//       >
//         <Form.Item
//           name="name"
//           label="Name"
//           rules={[{ required: true, message: "Please input name!" }]}
//         >
//           <Input />
//         </Form.Item>
//         <Form.Item
//           name="price"
//           label="Price"
//           rules={[{ required: true, message: "Please input price!" }]}
//         >
//           <Input />
//         </Form.Item>
//         <Form.Item
//           name="markUpPrice"
//           label="Mark Up Price"
//           rules={[{ required: true, message: "Please input mark up price!" }]}
//         >
//           <Input />
//         </Form.Item>
//         <Form.Item
//           name="code"
//           label="Code"
//           rules={[{ required: true, message: "Please input code!" }]}
//         >
//           <Input />
//         </Form.Item>
//         <Form.Item
//           name="status"
//           label="Status"
//           rules={[{ required: true, message: "Please select Status!" }]}
//         >
//           <Select placeholder="Select Status" allowClear>
//           {store.categories.map(it => {
//                             return <Option value={it.id}>{it.name}</Option>
//                         })}
//           </Select>
//         </Form.Item>
//       </Form>
//     </Modal>
//   );
// };
import React, { useState, useEffect } from "react";
import { Form, Input, Modal, Select } from "antd";
import { useStore } from "../../utils/useStore";

export const PulsaModal = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  const { Option } = Select;
  const dataStatus = ["Active", "Inactive"];
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const init = async () => {
    try {
      setIsLoading(true);
      await store.categories.getData();
      setIsLoading(false);
    } catch (e) {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    init();
  }, []);

  return (
    <Modal
      visible={visible}
      title={initialData.id ? "Edit Member" : "Create a new Member"}
      okText={initialData.id ? "Edit" : "Create"}
      cancelText="Cancel"
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
            form.resetFields();
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={initialData}
      >
        <Form.Item
          name="name"
          label="Name"
          rules={[{ required: true, message: "Please input name!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="price"
          label="Price"
          rules={[{ required: true, message: "Please input price!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="markUpPrice"
          label="Mark Up Price"
          rules={[{ required: true, message: "Please input mark up price!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="code"
          label="Code"
          rules={[{ required: true, message: "Please input code!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="status"
          label="Status"
          rules={[{ required: true, message: "Please select Status!" }]}
        >
          <Select placeholder="Select Sub Category" allowClear>
            <Option value="ACTIVE">ACTIVE</Option>
            <Option value="INACTIVE">INACTIVE</Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="subCategoriesId"
          label="Sub Categories"
          rules={[{ required: true, message: "Please select Sub Category!" }]}
        >
          <Select placeholder="Select Sub Category" allowClear>
            {store.categories.data.map((it) => {
              return <Option value={it.id}>{it.name}</Option>;
            })}
          </Select>
        </Form.Item>
      </Form>
    </Modal>
  );
};