import React, { useEffect, useState } from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined } 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;

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

  useEffect(() => {
    const init = async () => {
      try {
        setIsLoading(true);
        await store.product.getDataCategories();
        await store.product.getData();
        setIsLoading(false);
      } catch (e) {
        setIsLoading(false);
      }
    };

    init();
  }, []);

  const handleChangeTabPane = async (key) => {
    store.product.filterCategory = key;
    // console.log(key);
    await store.product.getData();
  };

  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>
              <FilterOutlined />
              Filter
            </Button>
          </Col>
          <Col span={12} style={{ textAlign: "right" }}>
            <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,
              }}
            />
            <Button onClick={() => (store.product.visibleModalProduct = true)}>
              <PlusSquareOutlined /> New
            </Button>
          </Col>
        </Row>

        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
          {store.product.dataCategories.map((item, idx) => (
            <TabPane tab={item.name} key={item.id}>
              {/* <ProductComponent category={item.name} /> */}
              <ProductComponent />
            </TabPane>
          ))}
        </Tabs>
      </Card>
    </div>
  );
});