import React, { useEffect, useState } from "react";
import {
  Button,
  Form,
  Input,
  message,
  Modal,
  Select,
  Space,
  Table,
  Tag,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { capitalize } from "lodash";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";

export const SubcategoryComponent = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();
  const { Option } = Select;
  const history = useHistory();
  const [idData, setIdData] = useState("");
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const init = async () => {
      try {
        setIsLoading(true);
        //store.product.pageCategories=StrToLower(props.category)
        getData();
        setIsLoading(false);
      } catch (e) {
        setIsLoading(false);
      }
    };

    init();
  }, []);

  const getData = async () => {
    await store.subcategory.getData();
    await store.category.getData();
  };

  const handleEditButton = (data) => {
    console.log(data, "isi data");
    form.setFieldsValue({
      code: data.code,
      name: data.name,
      categoryId: data.categoryId,
    });
    store.subcategory.visibleModalSubcategory = true;
    setIdData(data.id);
  };

  const columns = [
    {
      title: "Code",
      dataIndex: "code",
      key: "code",
    },
    {
      title: "Sub Category Name",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => handleEditButton(record)}>Edit</Button>
        </Space>
      ),
    },
  ];

  const handleCancel = () => {
    setIdData("");
    store.subcategory.visibleModalSubcategory = false;
  };

  const handleSubmit = async (data) => {
    console.log(data, "isi data2");
    if (idData !== "") {
      setConfirmLoading(true);
      try {
        await store.subcategory.update(idData, data);
        await getData();
        message.success("Success Update Data Category");
      } catch (e) {
        message.error("Failed Update Data Category");
      }
      setConfirmLoading(false);
      store.subcategory.visibleModalSubcategory = false;
      setIdData("");
      form.resetFields();
    } else {
      setConfirmLoading(true);
      try {
        await store.subcategory.create(data);
        await getData();
        message.success("Success Add New Category");
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Category");
      }
      setConfirmLoading(false);
      store.subcategory.visibleModalSubcategory = false;
      setIdData("");
      form.resetFields();
    }
  };
  //console.log()
  return (
    <div>
      <Table
        style={{ textAlign: "center" }}
        columns={columns}
        dataSource={store.subcategory.data}
        bordered
        pagination={{
          pageSize: store.product.pageSize,
          total: store.product.total_data,
          current: store.product.page + 1,
          showSizeChanger: true,
          simple: false,
        }}
        onChange={(page) => {
          let pageNumber = page.current;
          store.product.pageSize = page.pageSize;
          store.product.page = pageNumber - 1;
          // store.membership.isLoading = true;
          getData();
          // store.membership.isLoading = false;
        }}
      />

      <Modal
        visible={store.subcategory.visibleModalSubcategory}
        title={idData ? "Edit Sub Category" : "Create a new sub category"}
        okText={idData ? "Edit" : "Create"}
        cancelText="Cancel"
        onCancel={() => {
          form.resetFields();
          handleCancel();
        }}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              console.log(values, "isi form");
              handleSubmit(values);
              form.resetFields();
            })
            .catch((info) => {
              console.error("Validate Failed:", info);
            });
        }}
      >
        <Form form={form} layout="vertical">
          {!idData && (
            <Form.Item
              name="code"
              label="Code"
              rules={[
                { required: true, message: "Please input code category!" },
              ]}
            >
              <Input />
            </Form.Item>
          )}
          <Form.Item
            name="name"
            label="Name"
            rules={[{ required: true, message: "Please input name category!" }]}
          >
            <Input />
          </Form.Item>
          {!idData && (
            <Form.Item
              name="categoryId"
              label="Categories"
              rules={[{ required: true, message: "Please input category id!" }]}
            >
              <Select placeholder="Select Category" allowClear>
                {store.category.data.map((item) => (
                  <Option value={item.id} key={item.id}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          )}
        </Form>
      </Modal>
    </div>
  );
});