import React, { useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Pulsa } from "./Pulsa";
import { LINKS } from "../../routes/app";

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

export const Transaction = () => {

  const store = useStore();

  const [isLoading, setIsLoading] = useState(false);

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

    init();
  }, []);

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

  const callback = (key) => {
    console.log(key);
  };
  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>
        <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 }}
            />
          </Col>
        </Row>
        <Tabs
          defaultActiveKey="1"
          onChange={callback}
          size="default"
          tabBarGutter="50"
        >
          {store.transaction.dataCategories.map((item, index) => (
            <TabPane tab={item.name} key={index}>
              <Pulsa />
            </TabPane>
          ))}

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