import React, { 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";

const { Search } = Input;
const { Option } = Select;
export const Membership = observer(() => {
  const [form] = Form.useForm();
  const store = useStore();
  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

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

    init();
  }, []);

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

  const changeStatus = async (id, isActive) => {
    const status = isActive ? "inactive" : "active";
    const status2 = isActive ? "Inactivating" : "Activating";

    console.log(status);

    try {
      const response = await store.membership.changeStatus(id, status);

      response?.body?.statusCode === 201
        ? message.success(`Success ${status2} Membership`)
        : message.error(`Failed ${status2} Membership`);
    } catch (err) {
      console.log("error", err);
      message.error(`Failed ${status2} Membership`);
    }
  };
  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 columns = [
    {
      title: "Name",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "Username",
      dataIndex: "username",
      key: "username",
    },
    {
      title: "Role",
      dataIndex: "roleName",
      key: "role",
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
      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 onClick={() => changeStatus(record?.id, record?.isActive)}>
            {record?.isActive === true ? "Inactive" : "Active"}
          </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) {
      setInitialData({});
      setConfirmLoading(true);
      try {
        console.log(data);
        await store.membership.update(initialData.id, data);
        message.success(
          initialData.isChangePassword
            ? "Success Change Member Password"
            : "Success Update Data Member"
        );
        await getData();
      } catch (e) {
        message.error(
          initialData.isChangePassword
            ? "Failed Update Member Password"
            : "Failed Update Data Member"
        );
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    } else {
      setInitialData({});
      setConfirmLoading(true);
      try {
        await store.membership.create(data);
        message.success("Success Add New Member");
        await getData();
      } catch (e) {
        console.log(e, "apa errornya");
        message.error("Failed Add Member");
      }
      setConfirmLoading(false);
      setVisibleModal(false);
    }
  };

  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(" ")}>
      {/* <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal> */}
      <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>
          <Col
            span={24}
            style={{
              textAlign: "right",
              marginBottom: store.ui.mediaQuery.isMobile ? 30 : 10,
            }}
          >
            <Button
              onClick={() => (store.supplier.visibleModalTransaction = true)}
            >
              <DownloadOutlined /> Top Up Saldo
            </Button>
          </Col>
          {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;
                // store.membership.isLoading = true;
                await getData();
                // store.membership.isLoading = false;
              }}
            />
          )}

          {store.ui.mediaQuery.isMobile && (
            <List
              itemLayout="horizontal"
              position={"top"}
              pagination={{
                onChange: (page) => {
                  store.membership.pageSize = page.pageSize;
                  store.membership.page = page.current;
                  getData();
                },
                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={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>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});