import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Select, Tabs, Upload} from "antd";
import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ProductComponent} from "../../component/ProductComponent";
import {LINKS} from "../../routes/app";

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

export const Product = observer(() => {
  const [isLoading, setIsLoading] = useState(false);
  const store = useStore();

  useEffect(() => {
    const init = async () => {
      try {
        setIsLoading(true);
        await Promise.allSettled([
          store.supplier.getData(),
          store.product.getDataCategories(),
          store.product.getDataSubCategories(),
          store.category.getData(),
          store.category.getDataSubCategories(),
        ]);
        await store.product.getData();
        setIsLoading(false);
      } catch (e) {
        setIsLoading(false);
      }
    };

    init();
  }, []);

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.PRODUCT,
      name: <span style={{ fontWeight: "bold" }}>Product</span>,
    },
  ];

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Row style={{marginBottom: 20}}>
          <Col span={12}>
            <Button onClick={() => {
              store.product.visibleModalFilterProduct = true
            }}>
              <FilterOutlined/>
              Filter
            </Button>
          </Col>
          <Col span={12}>
            <div style={{display: 'flex', justifyContent: 'flex-end'}}>
              <Search
                  placeholder="input search text"
                  style={{
                    width: store.ui.mediaQuery.isMobile ? 160 : 200,
                    marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                    marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                  }}
              />
              <Upload>
                <Button disabled={store.product.uploadBtnProduct} style={{
                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                }} icon={<UploadOutlined/>}>
                  Upload Product
                </Button>
              </Upload>
              <Button onClick={() => (store.product.visibleModalProduct = true)}>
                <PlusSquareOutlined/> New
              </Button>
            </div>
          </Col>
        </Row>
        <ProductComponent/>
      </Card>
    </div>
  );
});