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);
    };

    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: 200, marginRight: 10}}
                        />
                        <Button onClick={() => store.product.visibleModalProduct = true}>
                            <PlusSquareOutlined/> New
                        </Button>
                    </Col>
                </Row>
                <Tabs
                    onChange={handleChangeTabPane}
                    size="default"
                    tabBarGutter="50"
                >
                    {store.product.dataCategories.map((item) => (
                        <TabPane
                            tab={item.name}
                            key={item.id}
                        >
                            <ProductComponent
                                data={store.product.data}
                            />
                        </TabPane>
                    ))}
                </Tabs>
            </Card>
        </div>
    );
});