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("Success Buy Product");
      } else {
        message.error("Failed Buy Product", 3);
      }
    } catch (e) {
      if (e.response?.body?.message) {
        message.error(e.response.body.message);
        return;
      }
      console.log(e, "apa errornya");
      message.error("Failed Buy 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.name}?`,
                          icon: <MoneyCollectOutlined/>,
                          okText: "Confirm",
                          cancelText: "Cancel",
                          okType: "primary",
                          onOk() {
                            handleBuyProduct(item.code)
                          },
                          onCancel() {
                            console.log("Cancel");
                          },
                        });
                      }}
                      style={{cursor: "pointer"}}
                  >
                    <span style={{color: "black"}}>{item.name}</span>
                    <br/>
                    <span style={{color: "grey", fontSize: 10}}>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(item?.currentPrice?.mark_up_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>
  );
});