import React, { useContext, useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  message,
  Row,
  Space,
  Table,
  Typography,
  Tabs,
  List,
  Divider
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import { MembershipModal } from "./MembershipModal";

const { Title, Text } = Typography;
const { TabPane } = Tabs;
export const DetailUser = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const { id } = useParams();
  const [visibleModal, setVisibleModal] = useState(false);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await getData();
      modalLoader.setLoading(false);
    })();

    return () => {
      store.membership.dataDetail = {};
      store.transaction.dataHistoryTopUp = [];
      store.transaction.dataDetailHistoryTransaction = [];
    };
  }, []);

  const getData = async () => {
    const isAdmin = store.authentication.userData.role === "Admin";
    await Promise.allSettled([
      store.transaction.getDataHistoryTopUp(id),
      store.transaction.getDetailHistoryTransaction(id),
      store.membership.getDetail(id),
      store.role.getData(isAdmin),
    ]);
  };

  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 || response?.body?.statusCode === 200
        ? message.success(`Success ${status2} Membership`)
        : message.error(`Failed ${status2} Membership`);
      await getData();
    } catch (err) {
      modalLoader.setLoading(false);
      message.error(`Failed ${status2} Membership`);
    }
  };

  const onSubmit = async (data) => {
    data.superior = true;
    setConfirmLoading(true);
    modalLoader.setLoading(true);
    try {
      let response;
      if (initialData.isChangePassword) {
        response = await store.membership.changePassword(initialData.id, data);
      } else {
        response = await store.membership.update(initialData.id, data);
      }

      setVisibleModal(false);

      if (response?.body?.statusCode === 200) {
        message.success(
          initialData.isChangePassword
            ? "Success Change Member Password"
            : "Success Update Data Member"
        );
      } else {
        message.error(
          initialData.isChangePassword
            ? "Failed Change Member Password"
            : "Failed Update Data Member"
        );
      }
      await getData();
    } catch (e) {
      modalLoader.setLoading(false);
      message.error(
        initialData.isChangePassword
          ? "Failed Update Member Password"
          : "Failed Update Data Member"
      );
    }
    modalLoader.setLoading(false);
    setConfirmLoading(false);
  };

  const columns = [
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Transaction Date",
      dataIndex: "transaction_date",
      key: "transaction_date",
      render: (text, record) => {
        return (
          <Text>
            {format(parseISO(record.transaction_date), "dd MMMM yyyy")}
          </Text>
        );
      },
    },
  ];

  const column = [
    {
      title: "Price",
      dataIndex: "price",
      key: "price",

      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    {
      title: "Pembeli",
      dataIndex: "buyer",
      key: "buyer",
    },
    {
      title: "Tujuan",
      dataIndex: "transaction_destination",
      key: "transaction_destination",
    },
    {
      title: "Kode Transaksi",
      dataIndex: "transaction_code",
      key: "transaction_code",
    },
    {
      title: "Status",
      dataIndex: "status",
      key: "status",
    },
    {
      title: "No Seri",
      dataIndex: "seri_number",
      key: "seri_number",
    },
    {
      title: "IDTrx Mitra",
      dataIndex: "partner_transaction_code",
      key: "partner_transaction_code",
    },
    {
      title: "Transaction Date",
      dataIndex: "created_at",
      key: "created_at",
      render: (text, record) => {
        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
      },
    },
  ];

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Beranda",
    },
    {
      route: LINKS.MEMBERSHIP,
      name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
    },
    {
      route: LINKS.USER_DETAIL.replace(":id", id),
      name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
    },
  ];

  const styleSaldoTitle = store.ui.mediaQuery.isDesktop
      ? {
        display: "flex",
        justifyContent: "center",
      }
      : { fontSize: "0.75rem" };
  const styleSaldoContent = store.ui.mediaQuery.isDesktop
      ? {
        fontSize: "1.25rem",
        display: "flex",
        justifyContent: "center",
      }
      : null;
  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData} />
      <Card>
        <Title strong>Detail User</Title>
        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={12}>
                <Text strong>Name</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.userDetail?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Username</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <Text>{store.membership.dataDetail.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.userDetail?.phone_number}
                </Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>
                  {store.membership.dataDetail.isActive === true
                    ? "Aktif"
                    : "Inaktif"}
                </Text>
              </Col>
            </Row>
          </Col>
          <Col lg={12} xs={24}>
            <Row>
              <Col lg={24} xs={24} style={{marginBottom: 30}}>
                {store.authentication.userData.role === "Admin" && (
                    <Title strong level={3}>
                      Action User Detail
                    </Title>
                )}
                {store.authentication.userData.role === "Admin" && (
                    <Space
                        size="middle"
                        align={"center"}
                        wrap={true}
                        style={{ textAlign: "center" }}
                    >
                      <Button
                          type={
                            store.membership.dataDetail.isActive === true
                                ? "danger"
                                : "primary"
                          }
                          onClick={() =>
                              changeStatus(
                                  store.membership.dataDetail.id,
                                  store.membership.dataDetail.isActive
                              )
                          }
                      >
                        {store.membership.dataDetail.isActive === true
                            ? "Inactive"
                            : "Active"}
                      </Button>
                      <Button
                          onClick={() => {
                            setInitialData({
                              id: store.membership.dataDetail.id,
                              name: store.membership.dataDetail.userDetail.name,
                              username: store.membership.dataDetail.username,
                              phone_number:
                              store.membership.dataDetail.userDetail.phone_number,
                              roleId: store.membership.dataDetail.roles.id,
                              isChangePassword: false,
                            });
                            setVisibleModal(true);
                          }}
                      >
                        Edit
                      </Button>
                      <Button
                          onClick={() => {
                            setInitialData({
                              id: store.membership.dataDetail.id,
                              name: store.membership.dataDetail.userDetail.name,
                              username: store.membership.dataDetail.username,
                              phone_number:
                              store.membership.dataDetail.userDetail.phone_number,
                              roleId: store.membership.dataDetail.roles.id,
                              isChangePassword: true,
                            });
                            setVisibleModal(true);
                          }}
                      >
                        Ganti Password
                      </Button>
                      <Button
                          type={
                            store.membership.dataDetail.isActive === true
                                ? "danger"
                                : "primary"
                          }
                          onClick={() =>
                              changeStatus(
                                  store.membership.dataDetail.id,
                                  store.membership.dataDetail.isActive
                              )
                          }
                      >
                        Withdraw Profit
                      </Button>
                    </Space>
                )}
              </Col>
              <Col lg={24} xs={24}>
                <Row>
                  <Col lg={12} xs={12}>
                    <Row justify={"center"}>
                      <Col lg={12} xs={12}>
                        <Title strong level={3} style={styleSaldoTitle}>
                          Saldo
                        </Title>
                      </Col>
                      <Col lg={24} xs={12}>
                        <Text style={styleSaldoContent}>
                          {new Intl.NumberFormat("id-ID", {
                            style: "currency",
                            currency: "IDR",
                          }).format(store.authentication.profileData?.wallet || 0)}
                        </Text>
                      </Col>
                      <Col></Col>
                    </Row>
                  </Col>
                  <Col lg={12} xs={12}>
                    <Row justify={"center"}>
                      <Col lg={12} xs={12}>
                        <Title strong level={3} style={styleSaldoTitle}>
                          Profit
                        </Title>
                      </Col>
                      <Col lg={24} xs={12}>
                        <Text style={styleSaldoContent}>
                          {new Intl.NumberFormat("id-ID", {
                            style: "currency",
                            currency: "IDR",
                          }).format(store.authentication.profileData?.profit || 0)}
                        </Text>
                      </Col>
                      <Col></Col>
                    </Row>
                  </Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Tabs defaultActiveKey="1">
              <TabPane tab="History Top Up" key="1">
                {/* {store.ui.mediaQuery.isDesktop && ( */}
                <Table
                  key="1"
                  hasEmpty
                  columns={columns}
                  dataSource={store.transaction.dataHistoryTopUp}
                  bordered
                  pagination={{
                    pageSize: store.transaction.pageSizeHistoryTransaction,
                    total: store.transaction.total_dataHistoryTransaction,
                    current: store.transaction.pageHistoryTransaction + 1,
                    showSizeChanger: true,
                    simple: false,
                  }}
                  onChange={async (page) => {
                    let pageNumber = page.current;
                    store.transaction.pageSize = page.pageSize;
                    store.transaction.page = pageNumber - 1;
                    modalLoader.setLoading(true);
                    await getData();
                    modalLoader.setLoading(false);
                  }}
                />
                {/* )} */}
                {/* <Table
                  columns={columns}
                  dataSource={store.transaction.dataHistoryTopUp}
                  bordered
                /> */}
              </TabPane>
              <TabPane tab="History Transaction" key="2">
                {store.ui.mediaQuery.isDesktop && (
                  <Table
                    key="1"
                    hasEmpty
                    columns={column}
                    dataSource={store.transaction.dataDetailHistoryTransactionDetailUser}
                    bordered
                    pagination={{
                      pageSize: store.transaction.pageSizeHistoryTransactionDetailUser,
                      total: store.transaction.total_dataDetailHistoryTransactionDetailUser,
                      current: store.transaction.pageHistoryTransactionDetailUser + 1,
                      showSizeChanger: true,
                      simple: false,
                    }}
                    onChange={async (page) => {
                      let pageNumber = page.current;
                      store.transaction.pageSize = page.pageSize;
                      store.transaction.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.transaction.pageSize = page.pageSize;
                        store.transaction.page = page.current - 1;
                        modalLoader.setLoading(true);
                        await getData();
                        modalLoader.setLoading(false);
                      },
                      pageSize: store.transaction.pageSize,
                      total: store.transaction.totalData,
                      current: store.transaction.page + 1,
                      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.name}
                              description={
                                <div style={{}}>
                                  <p>
                                    <small>Saldo System : {item.name}</small>{" "}
                                    <br />
                                    <small>Role : {item.roleName}</small> <br />
                                    <small>
                                      Saldo Supplier : {item.coa?.amount}
                                    </small>{" "}
                                    <br />
                                    {/* <Button
                                      style={{ marginRight: 10 }}
                                      onClick={() => {
                                        setDestination(item?.id);
                                        console.log(item?.id);
                                        setIsVisibleTopUpModal(true);
                                      }}
                                    >
                                      <DownloadOutlined /> Top Up Saldo
                                    </Button>
                                    <Button
                                      onClick={async () => {
                                        await store.transaction.getDataHistoryTopUp(
                                          item.id
                                        );
                                        history.push(
                                          LINKS.USER_DETAIL.replace(
                                            ":id",
                                            item.id
                                          )
                                        );
                                        console.log(item.id);
                                      }}
                                    >
                                      Detail
                                    </Button> */}
                                  </p>
                                </div>
                              }
                            />
                            <div style={{ marginRight: 16 }}>
                              <p
                                style={{
                                  fontSize: 9,
                                  margin: 0,
                                }}
                              >
                                {/* <Button
                            type={
                              item?.isActive === true ? "danger" : "primary"
                            }
                            onClick={() =>
                              changeStatus(item?.id, item?.isActive)
                            }
                          >
                            {item?.isActive === true ? "Inactive" : "Active"}
                          </Button> */}
                              </p>
                            </div>
                          </List.Item>
                          <Divider plain style={{ margin: 0 }} />
                        </div>
                      );
                    }}
                  />
                )}
                {/* <Table
                  columns={column}
                  dataSource={store.transaction.dataDetailHistoryTransaction}
                  bordered
                /> */}
              </TabPane>
            </Tabs>
          </Col>
        </Row>
        <div />
      </Card>
      <MembershipModal
        visible={visibleModal}
        confirmLoading={confirmLoading}
        initialData={initialData}
        onCreate={async (data) => {
          onSubmit(data);
        }}
        onCancel={() => {
          setInitialData({});
          setVisibleModal(false);
        }}
      />
    </div>
  );
});