import React, { useContext, useEffect } from "react";
import { useStore } from "../../utils/useStore";
import { Button, Card, Col, Input, message, Modal, Row, Select } from "antd";
import { observer } from "mobx-react-lite";
import { MoneyCollectOutlined } from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";

const { Search } = Input;
const { Option } = Select;

export const Product = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);

  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.transaction.getDataSubCategories(),
          store.transaction.getDataCategories(),
        ]);
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(false);
        if (e.response?.body?.message) {
          message.error(e.response.body.message);
          return;
        }
        message.error(e.message);
      }
    };

    init();
  }, []);

  const handleChangeSubcategory = async (item) => {
    store.transaction.filterSubCategory = item;
    modalLoader.setLoading(true);
    await store.transaction.getData();
    modalLoader.setLoading(false);
  };

  const handleBuyProduct = async (data) => {
    modalLoader.setLoading(true);
    try {
      const response = await store.transaction.buyProduct({
        productCode: data,
      });
      if (response.status === 201) {
        message.success("Berhasil Beli Produk");
      } else {
        message.error("Gagal Beli Produk", 3);
      }
    } catch (e) {
      if (e.response?.body?.message) {
        message.error(e.response.body.message);
        return;
      }
      console.log(e, "apa errornya");
      message.error("Gagal Beli Product");
    }
    modalLoader.setLoading(false);
  };

  return (
    <div>
      <Row>
        <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
          Sub Category
        </span>
      </Row>
      <Row>
        <Col span={24}>
          <Select
            placeholder={"Select Sub Category"}
            allowClear={true}
            onChange={(val) => handleChangeSubcategory(val)}
            style={{ marginBottom: "10px", width: "100%" }}
            value={store.transaction.filterSubCategory}
          >
            {store.transaction.dataSubCategories.map((item, index) => (
              <Option key={item.id} value={item.id}>
                {item.name}
              </Option>
            ))}
          </Select>
        </Col>
      </Row>
      <Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
        <Col
          span={12}
          style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
        >
          Produk & Nominal
        </Col>
        <Col span={12} style={{ textAlign: "right" }}>
          {/* <Search
            placeholder="input search text"
            style={{ width: 200, marginRight: 10 }}
          /> */}
        </Col>
      </Row>
      {store.transaction.data.length != 0 && (
        <Row>
          {store.transaction.data.map((item, index) => (
            <Col key={index} xs={24} md={16} lg={8}>
              <Card
                onClick={() => {
                  Modal.confirm({
                    title: `Are you sure buy ${item.product_name}?`,
                    icon: <MoneyCollectOutlined />,
                    okText: "Confirm",
                    cancelText: "Cancel",
                    okType: "primary",
                    onOk() {
                      handleBuyProduct(item.product_code);
                    },
                    onCancel() {
                      console.log("Cancel");
                    },
                  });
                }}
                hoverable
                style={{
                  cursor: "pointer",
                  marginLeft: 10,
                  borderColor: "salmon",
                  height: 100,
                  marginBottom: 10,
                }}
              >
                <span style={{ color: "black" }}>{item.product_name}</span>
                <br />
                <span style={{ color: "grey", fontSize: 10 }}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(item?.price)}
                </span>
              </Card>
            </Col>
          ))}
        </Row>
      )}
      {/* {store.transaction.data.length !== 0 && (
          <Col style={{textAlign: "right", marginTop: "1em"}}>
            <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
              Beli Sekarang
            </Button>
          </Col>
      )} */}
    </div>
  );
});