import React from "react";
import { Form, Input, message, Modal } from "antd";
import { observer } from "mobx-react-lite";
import { useStore } from "../utils/useStore";

export const TopupsaldoModal = observer((props) => {
  const store = useStore();
  const [form] = Form.useForm();

  const handleCancelTransaction = () => {
    store.supplier.visibleModalTransaction = false;
  };
  const handleSubmitTransaction = async (data) => {
    console.log(data, "isi data2");

    try {
      await store.supplier.createTransaction(data);
      message.success("Success Top Up");
    } catch (e) {
      console.log(e, "apa errornya");
      message.error("Failed Top Up");
    }

    store.supplier.visibleModalTransaction = false;
    form.resetFields();
  };
  return (
    <div>
      <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"
          initialValues={{ supplier: props.code }}
        >
          <Form.Item
            name="supplier"
            label="Supplier"
            rules={[{ required: true, message: "Please input supplier!" }]}
          >
            <Input disabled={true} />
          </Form.Item>
          <Form.Item
            name="amount"
            label="Amount"
            rules={[{ required: true, message: "Please input amount!" }]}
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
});