import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Product} from "./Product";
import {LINKS} from "../../routes/app";
import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";

const {TabPane} = Tabs;

export const Transaction = observer(() => {
  const store = useStore();

  const modalLoader = useContext(ModalLoaderContext);

  // Init
  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        await store.transaction.getDataCategories();
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(false);
      }
    };

    init();
  }, []);

  // Category
  useEffect(() => {
    console.log('⚡ transaction category store', store.transaction.dataCategories)
  }, [store.transaction.dataCategories])

  const handleChangeTabs = async (key) => {
    store.transaction.filterCategory = key;
    modalLoader.setLoading(true);
    await store.transaction.getDataSubCategories();
    modalLoader.setLoading(false);
  };

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

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} text=""/>
      <Card>
        <Tabs
          onChange={handleChangeTabs}
          size="default"
          tabBarGutter="50"
        >
          {store.transaction.dataCategories.map((item, index) => (
            <TabPane tab={item.name} key={item.id}>
              <Product/>
            </TabPane>
          ))}

        </Tabs>
      </Card>
    </div>
  );
});