import React, {useEffect, useState} 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>
  );
};