import React, {useContext, useEffect, useState} from "react";
import {
  Button,
  Card,
  Col,
  Divider,
  Input,
  List,
  message,
  Modal,
  Row,
  Space,
  Table,
  Tag,
  Form,
  Select,
} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {
  ExclamationCircleOutlined,
  FilterOutlined,
  PlusSquareOutlined,
  DownloadOutlined,
} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";

const {Search} = Input;
const {Option} = Select;
export const Membership = observer(() => {
  const [form] = Form.useForm();
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
  const [destination, setDestination] = useState(null);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const modalLoader = useContext(ModalLoaderContext);

  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        const isAdmin = store.authentication.userData.role === "Admin";

        await getData();
        await store.role.getData(isAdmin);
        await store.supplier.getData();
        modalLoader.setLoading(false);
      } catch (e) {
        console.error(e);
        modalLoader.setLoading(false);
        if (e.response?.body?.message) {
          message.error(e.response.body.message);
          return;
        }
        message.error(e.message);
      }
    };

    init();
  }, []);

  const getData = async () => {
    store.authentication.userData.role === "Admin"
      ? await store.membership.getData()
      : await store.membership.getDataBySuperior();
  };

  const changeStatus = async (id, isActive) => {
    const status = isActive ? "inactive" : "active";
    const status2 = isActive ? "Inactivating" : "Activating";
    try {
      modalLoader.setLoading(true);
      const response = await store.membership.changeStatus(id, status);
      modalLoader.setLoading(false);

      response?.body?.statusCode === 201
        ? message.success(`Success ${status2} Membership`)
        : message.error(`Failed ${status2} Membership`);
    } catch (err) {
      modalLoader.setLoading(false);
      message.error(`Failed ${status2} Membership`);
    }
  };

  const handleCancelTransaction = () => {
    setIsVisibleTopUpModal(false);
    setDestination(null);
  };

  const handleSubmitTransaction = async (data) => {
    modalLoader.setLoading(true);
    try {
      data.destination = destination;
      if (data.amount) {
        data = {
          ...data,
          amount: Number(data.amount),
        };
      }

      (await store.authentication.userData.role) === "Admin"
        ? store.transaction.distributeAdmin(data)
        : store.transaction.distribute(data);
      message.success("Success Top Up");
      modalLoader.setLoading(false);
      //await store.supplier.getData()
    } catch (e) {
      console.log(e, "apa errornya");
      modalLoader.setLoading(false);
      message.error("Failed Top Up");
    }
    setConfirmLoading(false);
    setIsVisibleTopUpModal(false);
    form.resetFields();
    setDestination(null);
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text, record) => record?.name ?? record?.username,
    },
    {
      title: "Role",
      dataIndex: "roleName",
      key: "role",
    },
    {
      title: "Saldo",
      dataIndex: ["coa", "amount"],
      key: ["coa", "amount"],
    },
    {
      title: "Status",
      dataIndex: "isActive",
      key: "isActive",
      render: (text, record) => (
        <Tag
          color={record?.isActive === true ? "processing" : "#E3E8EE"}
          style={{color: "#4F566B"}}
        >
          {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
        </Tag>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (text, record) => (
        <Space size="middle">
          <Button
            type={record?.isActive === true ? "danger" : "primary"}
            onClick={() => changeStatus(record?.id, record?.isActive)}
          >
            {record?.isActive === true ? "Inactive" : "Active"}
          </Button>
          <Button
            onClick={() => {
              setDestination(record?.id);
              console.log(record?.id);
              setIsVisibleTopUpModal(true);
            }}
          >
            <DownloadOutlined/> Top Up Saldo
          </Button>
          <Button
            onClick={() => {
              let record2 = record;
              delete record2.password;
              record2.isChangePassword = false;

              setInitialData({
                ...record2,
                // roleId: record.roles.id,
              });
              setVisibleModal(true);
            }}
          >
            Edit
          </Button>
          <Button
            onClick={() => {
              let record2 = record;
              delete record2.password;
              record2.isChangePassword = true;

              setInitialData({
                ...record2,
                // roleId: record.roles.id,
              });
              setVisibleModal(true);
            }}
          >
            Ganti Password
          </Button>
          {/* <Button
            onClick={async () => {
              handleDelete(record.id);
            }}
          >
            Delete
          </Button> */}
        </Space>
      ),
    },
  ];

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

  const onSubmit = async (data) => {
    data.superior = true;

    if (initialData.id) {
      setConfirmLoading(true);
      modalLoader.setLoading(true);
      try {
        await store.membership.update(initialData.id, data);
        message.success(
          initialData.isChangePassword
            ? "Success Change Member Password"
            : "Success Update Data Member"
        );
        await getData();
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(true);
        message.error(
          initialData.isChangePassword
            ? "Failed Update Member Password"
            : "Failed Update Data Member"
        );
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    } else {
      setConfirmLoading(true);
      modalLoader.setLoading(true);
      try {
        await store.membership.create(data);
        message.success("Success Add New Member");
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
      modalLoader.setLoading(false);
      setConfirmLoading(false);
      setVisibleModal(false);
      setInitialData({});
    }
  };

  const handleDelete = (record) => {
    Modal.confirm({
      title: "Are you sure delete this record?",
      icon: <ExclamationCircleOutlined/>,
      okText: "Yes",
      okType: "primary",
      cancelText: "Cancel",
      async onOk() {
        try {
          //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
          await store.membership.delete(record);
          message.success("Success Delete Data");
          await getData();
        } catch (e) {
          message.error("Failed Delete Data");
        }
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  };

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData}/>
      <Card>
        <div>
          <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={() => {
                  setInitialData({});
                  setVisibleModal(true);
                }}
              >
                <PlusSquareOutlined/> New
              </Button>
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
            <Table
              key="1"
              hasEmpty
              columns={columns}
              dataSource={store.membership.data}
              bordered
              pagination={{
                pageSize: store.membership.pageSize,
                total: store.membership.total_data,
                current: store.membership.page + 1,
                showSizeChanger: true,
                simple: false,
              }}
              onChange={async (page) => {
                let pageNumber = page.current;
                store.membership.pageSize = page.pageSize;
                store.membership.page = pageNumber - 1;
                modalLoader.setLoading(true);
                await getData();
                modalLoader.setLoading(false);
              }}
            />
          )}

          {store.ui.mediaQuery.isMobile && (
            <List
              itemLayout="horizontal"
              position={"top"}
              pagination={{
                onChange: async (page) => {
                  store.membership.pageSize = page.pageSize;
                  store.membership.page = page.current;
                  modalLoader.setLoading(true);
                  await getData();
                  modalLoader.setLoading(false);
                },
                pageSize: store.membership.pageSize,
                total: store.membership.total_data,
                current: store.membership.page,
                style: {marginBottom: "1rem", marginRight: "1rem"},
              }}
              dataSource={store.membership.data}
              style={{padding: 0}}
              renderItem={(item) => {
                return (
                  <div>
                    <List.Item
                      key={item.id}
                      style={{
                        backgroundColor: "#ffffff",
                        paddingTop: 0,
                        paddingBottom: 0,
                        display: "flex",
                        flexDirection: "row",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <List.Item.Meta
                        className={["cariparkir-container"].join(" ")}
                        title={item.username}
                        description={
                          <div style={{}}>
                            <p>
                              <small>Username : {item.username}</small> <br/>
                            </p>
                          </div>
                        }
                      />
                      <div style={{marginRight: 16}}>
                        <p
                          style={{
                            fontSize: 9,
                            margin: 0,
                          }}
                        >
                          {item.username}
                        </p>
                      </div>
                    </List.Item>
                    <Divider plain style={{margin: 0}}/>
                  </div>
                );
              }}
            />
          )}
        </div>
      </Card>
      <Modal
        visible={isVisibleTopUpModal}
        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>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});