import React, { useContext, useState } from "react";
import {
  Button,
  Col,
  Form,
  Input,
  message,
  Modal,
  Row,
  Select,
  Table,
  Divider,
  Tag,
  Typography,
  List,
} 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";
import { ModalLoaderContext } from "../utils/modal";

const { Title, Text } = Typography;

export const ProductComponent = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();
  const { Option } = Select;
  const history = useHistory();
  const [idData, setIdData] = useState("");
  const [filterSupplier, setFilterSupplier] = useState(null);
  const [filterCategories, setFilterCategories] = useState(null);
  const [filterSubCategories, setFilterSubCategories] = useState(null);
  const modalLoader = useContext(ModalLoaderContext);

  const handleEditButton = (data) => {
    console.log(data, "isi data");
    form.setFieldsValue({
      name: data.name,
      price: data.price,
      markUpPrice: data.basePrice,
      code: data.code,
      status: data.status,
      subCategoriesId: data.sub_categories.id,
    });
    store.product.visibleModalProduct = true;
    setIdData(data.id);
  };

  const columns = [
    {
      title: "Kode",
      dataIndex: "code",
      key: "code",
    },
    {
      title: "Produk",
      dataIndex: ["name"],
      key: "name",
    },
    {
      title: "Harga Beli",
      dataIndex: ["currentPrice", "price"],
      key: ["currentPrice", "price"],
    },
    {
      title: "Harga Jual",
      dataIndex: ["currentPrice", "mark_up_price"],
      key: ["currentPrice", "mark_up_price"],
    },
    // {
    //     title: "Gangguan",
    //     dataIndex: "status",
    //     key: "status",
    //     render: (text, record) => (
    //         <Tag
    //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
    //             style={{color: "#4F566B"}}
    //         >
    //             {capitalize(record?.status)}
    //         </Tag>
    //     ),
    // },
    {
      title: "Tersedia",
      dataIndex: "tersedia",
      key: "tersedia",
      render: (text, record) => (
        <Tag
          color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
          style={{ color: "#4F566B" }}
        >
          {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
        </Tag>
      ),
    },
  ];

  const deleteData = async (id) => {
    try {
      console.log(id);
      await store.product.delete(id);
      message.success("Data Berhasil Dihapus");
      history.push(LINKS.PRODUCT);
    } catch (err) {
      console.log("error", err);
      message.error("Gagal menghapus");
    }
  };

  const handleDelete = (id) => {
    Modal.confirm({
      title: "Are you sure delete this record?",
      icon: <ExclamationCircleOutlined />,
      okText: "Yes",
      okType: "primary",
      cancelText: "Cancel",
      onOk() {
        return deleteData(id);
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  const handleCancel = () => {
    setIdData("");
    store.product.visibleModalProduct = false;
  };

  const handleSubmit = async (data) => {
    console.log(data, "isi data2");
    if (idData !== "") {
      modalLoader.setLoading(true);
      try {
        await store.product.update(idData, data);
        message.success("Success Update Data Member");
      } catch (e) {
        message.error("Failed Update Data Member");
      }
      modalLoader.setLoading(false);
      store.product.visibleModalProduct = false;
      setIdData("");
      form.resetFields();
    } else {
      modalLoader.setLoading(true);
      try {
        await store.product.create(data);
        message.success("Success Add New Member");
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
      modalLoader.setLoading(false);
      store.product.visibleModalProduct = false;
      setIdData("");
      form.resetFields();
    }
  };

  const handleRemoveFilter = async () => {
    store.product.filterSupplier = null;
    store.product.filterSubCategory = null;
    setFilterSupplier(null);
    setFilterCategories(null);
    setFilterSubCategories(null);
    await store.product.getData();
    store.product.visibleModalFilterProduct = false;
  };

  const handleCancelFilter = () => {
    setFilterSupplier(null);
    setFilterCategories(null);
    setFilterSubCategories(null);
    store.product.visibleModalFilterProduct = false;
  };

  const handleSubmitFilter = async () => {
    store.product.filterSupplier = filterSupplier;
    store.product.filterSubCategory = filterSubCategories;
    modalLoader.setLoading(true);
    await store.product.getData();
    modalLoader.setLoading(false);
    store.product.visibleModalFilterProduct = false;
  };

  const footerLayoutFilter = [
    <Button
      key={"remove"}
      onClick={handleRemoveFilter}
      style={{
        backgroundColor: "#e74e5e",
        color: "#fff",
      }}
    >
      Remove Filter
    </Button>,
    <Button key={"cancel"} onClick={handleCancelFilter}>
      Cancel
    </Button>,
    <Button
      key={"submit"}
      onClick={handleSubmitFilter}
      style={{
        backgroundColor: "#4e79e7",
        color: "#fff",
      }}
    >
      Apply
    </Button>,
  ];

  return (
    <div>
      {store.ui.mediaQuery.isDesktop && (
        <Table
          style={{
            textAlign: "center",
            width: store.ui.mediaQuery.isMobile ? 250 : "",
          }}
          columns={columns}
          dataSource={store.product.data}
          bordered
          pagination={{
            pageSize: store.product.pageSize,
            total: store.product.total_data,
            current: store.product.page + 1,
            showSizeChanger: true,
            simple: false,
          }}
          onChange={async (page) => {
            let pageNumber = page.current;
            store.product.pageSize = page.pageSize;
            store.product.page = pageNumber - 1;
            modalLoader.setLoading(true);
            await store.product.getData();
            modalLoader.setLoading(false);
          }}
        />
      )}
      {store.ui.mediaQuery.isMobile && (
        <List
          itemLayout="horizontal"
          position={"top"}
          pagination={{
            onChange: async (page) => {
              store.product.pageSize = page.pageSize;
              store.product.page = page.current;
              modalLoader.setLoading(true);
              await store.product.getData();
              modalLoader.setLoading(false);
            },
            pageSize: store.product.pageSize,
            total: store.product.total_data,
            current: store.product.page,
            style: { marginBottom: "1rem", marginRight: "1rem" },
          }}
          dataSource={store.product.data}
          style={{ padding: 0 }}
          renderItem={(item) => {
            return (
              <div>
                <List.Item
                  key={item.id}
                  style={{
                    backgroundColor: "#ffffff",
                    paddingTop: 0,
                    paddingBottom: 0,
                    display: "flex",
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <List.Item.Meta
                    className={["cariparkir-container"].join(" ")}
                    title={item.code}
                    description={
                      <div style={{}}>
                        <p>
                          <small>Nama Produk : {item.name}</small> <br />
                          <small>Harga Beli : {item.currentPrice.price}</small>
                          <br />
                          <small>
                            Harga Jual : {item.currentPrice.mark_up_price}
                          </small>
                        </p>
                        <p></p>
                      </div>
                    }
                  />
                  <div style={{ marginRight: 16 }}>
                    <p
                      style={{
                        fontSize: 9,
                        margin: 0,
                      }}
                    >
                      <Tag
                        color={item?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
                        style={{ color: "#4F566B" }}
                      >
                        {item?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
                      </Tag>
                    </p>
                  </div>
                </List.Item>
                <Divider plain style={{ margin: 0 }} />
              </div>
            );
          }}
        />
      )}
      <Modal
        visible={store.product.visibleModalProduct}
        title={idData ? "Edit Product" : "Create a new Product"}
        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">
          <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 categories!" },
            ]}
          >
            <Select placeholder="Select Sub Category" allowClear>
              {store.product.dataSubCategories.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        visible={store.product.visibleModalFilterProduct}
        title={"Filter"}
        footer={footerLayoutFilter}
      >
        <Row>
          <Col span={24}>
            <Title level={5} type={"secondary"} strong>
              Filter Supplier
            </Title>
            <Select
              mode={"multiple"}
              placeholder="Choose Supplier"
              onChange={(val) => {
                setFilterSupplier(val);
              }}
              style={{ marginBottom: "20px", width: "100%" }}
            >
              {store.supplier.data.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Col>
          <Col span={24}>
            <Title level={5} type={"secondary"} strong>
              Filter Categories
            </Title>
            <Select
              mode={"multiple"}
              placeholder="Choose Category"
              onChange={async (val) => {
                setFilterCategories(val);
                store.product.filterByCategory = val;
                await store.product.getDataSubCategories();
              }}
              style={{ marginBottom: "20px", width: "100%" }}
            >
              {store.category.data.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Col>
          <Col span={24}>
            <Title level={5} type={"secondary"} strong>
              Filter Sub-Categories
            </Title>
            <Select
              mode={"multiple"}
              placeholder="Choose Sub-Category"
              onChange={(val) => {
                setFilterSubCategories(val);
              }}
              style={{ marginBottom: "20px", width: "100%" }}
            >
              {store.product.dataSubCategories.map((item) => (
                <Option value={item.id} key={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Col>
        </Row>
      </Modal>
    </div>
  );
});