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 {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app";

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

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

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

        init();
    }, []);

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

    const routeData = [
        {
            route: LINKS.HOME,
            name: "Home",
        },
        {
            route: LINKS.PARTNER,
            name: <span style={{fontWeight: 'bold'}}>Partner</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.partner.visibleModalPartner = true}>
                            <PlusSquareOutlined/> New
                        </Button>
                    </Col>
                </Row>
                <PartnerComponent />
            </Card>
        </div>
    );
});