import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  Input,
  Row,
  Tabs,
  Form,
  message,
  Modal,
  Select,
} from "antd";
import {
  FilterOutlined,
  PlusSquareOutlined,
  DownloadOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app";

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

export const Supplier = observer(() => {
  const [isLoading, setIsLoading] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form] = Form.useForm();
  const store = useStore();

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

    init();
  }, []);

  // const handleChangeTabPane = async (key) => {
  //     store.product.filterCategory = key;
  //     console.log(key);
  // };
  const handleCancelTransaction = () => {
    store.supplier.visibleModalTransaction = false;
  };
  const handleSubmitTransaction = async (data) => {
    console.log(data, "isi data2");
    setConfirmLoading(true);
    try {
      await store.supplier.createTransaction(data);
      message.success("Success Top Up");
      //await store.supplier.getData()
    } catch (e) {
      console.log(e, "apa errornya");
      message.error("Failed Top Up");
    }
    setConfirmLoading(false);
    store.supplier.visibleModalTransaction = false;
    form.resetFields();
  };
  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.SUPPLIER,
      name: <span style={{ fontWeight: "bold" }}>Supplier</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,
              }}
              onSearch={(value) => console.log(value)}
            />
            <Button
              //style={{ marginLeft: "10px" }}
              onClick={() => (store.supplier.visibleModalSupplier = true)}
            >
              <PlusSquareOutlined /> New
            </Button>
          </Col>
        </Row>
        <Col span={24} style={{ textAlign: "right" }}>
          <Button
            onClick={() => (store.supplier.visibleModalTransaction = true)}
          >
            <DownloadOutlined /> Top Up Saldo
          </Button>
        </Col>
        <Tabs
          //onChange={handleChangeTabPane}
          size="default"
          tabBarGutter="50"
        >
          <TabPane tab="Supplier" key="1">
            <SupplierComponent />
          </TabPane>
          ))
        </Tabs>
      </Card>
      <Modal
        visible={store.supplier.visibleModalTransaction}
        title="Top Up Saldo"
        okText="Top Up"
        cancelText="Cancel"
        onCancel={() => {
          form.resetFields();
          handleCancelTransaction();
        }}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              console.log(values, "isi form");
              handleSubmitTransaction(values);
              form.resetFields();
            })
            .catch((info) => {
              console.error("Validate Failed:", info);
            });
        }}
      >
        <Form form={form} layout="vertical">
          <Form.Item
            name="supplier"
            label="Supplier"
            rules={[{ required: true, message: "Please input supplier!" }]}
          >
            <Select placeholder="Select Code Supplier" allowClear>
              {store.supplier.data.map((item) => (
                <Option value={item.code} key={item.code}>
                  {item.code}
                </Option>
              ))}
            </Select>
          </Form.Item>
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please input amount!" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});