import React, { useContext, useEffect } from "react";
import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
  DropboxOutlined,
  DollarCircleOutlined,
  BarChartOutlined,
} from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";

export const Home = observer(() => {
  const modalLoader = useContext(ModalLoaderContext);
  const store = useStore();
  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        const isAdmin = store.authentication.userData.role === "Admin";
        await getData();
        await store.membership.getDataBySuperior();
        await store.partner.getData();
        await store.transaction.getDataTransaction();
        await store.role.getData(isAdmin);
        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 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"],
      width: "20%",
      render: (text) =>
        new Intl.NumberFormat("id-ID", {
          style: "currency",
          currency: "IDR",
        }).format(text),
    },
    // {
    //   title: "Action",
    //   key: "action",
    //   render: (text, record) => (
    //     <Space size="middle">
    //       <Button
    //         onClick={() => {
    //           setDestination(record?.id);
    //           console.log(record?.id);
    //           setIsVisibleTopUpModal(true);
    //         }}
    //       >
    //         <DownloadOutlined /> Top Up Saldo
    //       </Button>
    //       <Button
    //         onClick={async () => {
    //           await store.transaction.getDataHistoryTopUp(record.id);
    //           history.push(LINKS.USER_DETAIL.replace(":id", record.id));
    //           console.log(record.id);
    //         }}
    //       >
    //         Detail
    //       </Button>
    //     </Space>
    //   ),
    // },
  ];
  return (
    <div>
      {store.ui.mediaQuery.isDesktop && (
        <Row
          style={{
            marginTop: 30,
            marginLeft: 30,
          }}
        >
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <BarChartOutlined style={{ fontSize: 25 ,marginRight:80}} />
              
              <PageHeader title={<span>Total Transaksi</span>}>
                <p>
                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
                </p>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <DropboxOutlined style={{ fontSize: 25 }} />
              <PageHeader title={<span>Total Keuntungan B2B</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <DollarCircleOutlined style={{ fontSize: 25 }} />
              <PageHeader title={<span>Total Keuntungan B2C</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
        </Row>
      )}
      {store.authentication.userData.role === "Admin" &&
        store.ui.mediaQuery.isDesktop && (
          <Row style={{ marginLeft: 50, marginTop: 10 }}>
            <Card
              className={"shadow"}
              title="List Transaksi B2B"
              style={{
                marginBottom: 30,
                marginRight: 20,
                borderColor: "salmon",
                width: "47%",
              }}
            >
              <Table
                key="1"
                hasEmpty
                size="large"
                columns={columns}
                dataSource={store.membership.data}
                bordered
                pagination={{
                  pageSize: store.membership.pageSize,
                  total: store.membership.totalData,
                  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);
                }}
              />
            </Card>
            <Card
              className={"shadow"}
              title="List Transaksi B2C"
              style={{
                marginBottom: 30,
                borderColor: "salmon",
                width: "47%",
              }}
            >
              <Table
                key="1"
                hasEmpty
                size="large"
                columns={columns}
                dataSource={store.membership.data}
                bordered
                pagination={{
                  pageSize: store.membership.pageSize,
                  total: store.membership.totalData,
                  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);
                }}
              />
            </Card>
          </Row>
        )}
      {store.ui.mediaQuery.isMobile && (
        <div style={{ marginTop: 10 }}>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <BarChartOutlined style={{ fontSize: 25,marginRight:80 }} />
              <PageHeader title={<span>Total Transaksi</span>}>
                <p>
                  <h4>{store.transaction.dataTransaction} Transaksi</h4>
                </p>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <DropboxOutlined style={{ fontSize: 25 }} />
              <PageHeader title={<span>Total Keuntungan B2B</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <DollarCircleOutlined style={{ fontSize: 25 }} />
              <PageHeader title={<span>Total Keuntungan B2C</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
        </div>
      )}
      {store.authentication.userData.role === "Admin" &&
        store.ui.mediaQuery.isMobile && (
          <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
            <Card
              className={"shadow"}
              title="List Transaksi B2B"
              style={{
                marginBottom: 10,
                borderColor: "salmon",
              }}
            >
              <Table
                key="1"
                hasEmpty
                size="small"
                columns={columns}
                dataSource={store.membership.data}
                bordered
                pagination={{
                  pageSize: store.membership.pageSize,
                  total: store.membership.totalData,
                  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);
                }}
              />
            </Card>
            <Card
              className={"shadow"}
              title="List Transaksi B2C"
              style={{
                marginBottom: 30,
                borderColor: "salmon",
              }}
            >
              <Table
                key="1"
                hasEmpty
                size="small"
                columns={columns}
                dataSource={store.membership.data}
                bordered
                pagination={{
                  pageSize: store.membership.pageSize,
                  total: store.membership.totalData,
                  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);
                }}
              />
            </Card>
          </Row>
        )}
    </div>
  );
});