import React, { useContext, useEffect, useState } from "react";
import {
  Button,
  Card,
  Col,
  message,
  Row,
  Space,
  Table,
  Typography,
  Tabs,
  List,
  Tag,
  Divider,
  Image,
} 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 { appConfig } from "../../config/app";
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.authentication.dataProfit = [];
      store.transaction.dataDetailHistoryTransaction = [];
    };
  }, []);

  const getData = async () => {
    const isAdmin = store.authentication.userData.role === "Admin";
    await Promise.allSettled([
      store.transaction.getDataHistoryTopUp(id),
      store.authentication.getProfit(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 withdrawProfit = async (id) => {
    try {
      modalLoader.setLoading(true);
      const response = await store.membership.withdrawProfit(id);
      modalLoader.setLoading(false);

      response?.body?.statusCode === 201 || response?.body?.statusCode === 200
        ? message.success(`Success Withdraw Profit`)
        : message.error(`Failed Withdraw Profit`);
      await getData();
    } catch (err) {
      modalLoader.setLoading(false);
      message.error(`Failed Withdraw Profit`);
    }
  };

  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",
      render: (text, record) => {
        return (
          <Tag
            color={
              record.status === 1
                ? "success"
                : record.status === 0
                ? "warning"
                : "processing"
            }
          >
            {record.status === 1
              ? "Success"
              : record.status === 0
              ? "Pending"
              : "Failed"}
          </Tag>
        );
      },
    },
    {
      title: "No Seri",
      dataIndex: "seri_number",
      key: "seri_number",
    },
    {
      title: "IDTrx Mitra",
      dataIndex: "partner_transaction_code",
      key: "partner_transaction_code",
    },
    {
      title: "Tanggal Transaksi",
      dataIndex: "created_at",
      key: "created_at",
      render: (text, record) => {
        return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
      },
    },
    {
      title: "Alasan Gagal",
      dataIndex: "failed_reason",
      key: "failed_reason",
    },
  ];

  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>
        <Row style={{ marginBottom: 10 }}>
          <Title strong level={2}>
            Detail User
          </Title>
          <Col lg={20} xs={20} style={{ textAlign: "right" }}>
            {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={() => withdrawProfit(store.membership.dataDetail.id)}
                >
                  Withdraw Profit
                </Button>
              </Space>
            )}
          </Col>
        </Row>

        <Row style={{ marginBottom: 20 }}>
          <Col lg={12} xs={24}>
            <Row>
              <Col span={10}>
                <Text strong>Name</Text>
              </Col>
              <Col span={10}>
                <Text>{store.authentication.dataProfit.userDetail?.name}</Text>
              </Col>
              <Col span={10}>
                <Text strong>Username</Text>
              </Col>
              <Col span={10}>
                <Text>{store.authentication.dataProfit.username}</Text>
              </Col>
              <Col span={10}>
                <Text strong>Role</Text>
              </Col>
              <Col span={10}>
                <Text>{store.authentication.dataProfit.roles?.name}</Text>
              </Col>
              <Col span={10}>
                <Text strong>Phone Number</Text>
              </Col>
              <Col span={10}>
                <Text>
                  {store.authentication.dataProfit.userDetail?.phone_number}
                </Text>
              </Col>
              <Col span={10}>
                <Text strong>Id Number</Text>
              </Col>
              <Col span={10}>
                <Text>
                  {store.authentication.dataProfit.userDetail?.identity_number}
                </Text>
              </Col>
              <Col span={10}>
                <Text strong>Status</Text>
              </Col>
              <Col span={10}>
                <Text>
                  {store.authentication.dataProfit.isActive === true
                    ? "Aktif"
                    : "Inaktif"}
                </Text>
              </Col>
              <Col span={10}>
                <Text strong>Image identity</Text>
              </Col>
              <Col span={10}>
                <Text strong>Image Store</Text>
              </Col>
              <Col span={10}>
                <Image
                  src={`${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`}
                  style={{ width: "5vw" }}
                  alt={store.authentication.dataProfit.userDetail?.name}
                />
              </Col>
              <Col span={10}>
              <Image
                  src={`${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_store}`}
                  style={{ width: "5vw" }}
                  alt={store.authentication.dataProfit.userDetail?.name}
                />
              </Col>
            </Row>
          </Col>
          <Col lg={12} xs={24}>
            <Row>
              <Col lg={24} xs={24}>
                <Row>
                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
                    <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.dataProfit.wallet || 0
                          )}
                        </Text>
                      </Col>
                      <Col></Col>
                    </Row>
                  </Col>
                  <Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
                    <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.dataProfit?.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
                  //   columns={columns}
                  //   bordered
                  //   dataSource={store.transaction.dataHistoryTransaction}
                  //   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.pageSizeHistoryTransaction =
                  //       page.pageSize;
                  //     store.transaction.pageHistoryTransaction = pageNumber - 1;
                  //     modalLoader.setLoading(true);
                  //     await store.transaction.getDataHistoryTransaction();
                  //     modalLoader.setLoading(false);
                  //   }}
                  // />
                  <Table
                    key="1"
                    hasEmpty
                    columns={column}
                    dataSource={
                      store.transaction.dataDetailHistoryTransactionDetailUser
                    }
                    bordered
                    pagination={{
                      pageSize: store.transaction.pageSize,
                      total: store.transaction.total_data,
                      current: store.transaction.page + 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.total_data,
                      current: store.transaction.page + 1,
                      style: { marginBottom: "1rem", marginRight: "1rem" },
                    }}
                    dataSource={
                      store.transaction.dataDetailHistoryTransactionDetailUser
                    }
                    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.buyer}
                              description={
                                <div style={{}}>
                                  <p>
                                    <small>Price : {item.price}</small> <br />
                                    <small>
                                      Tujuan : {item.transaction_destination}
                                    </small>{" "}
                                    <br />
                                    <small>
                                      Kode Transaksi : {item.transaction_code}
                                    </small>{" "}
                                    <br />
                                    <small>
                                      Status :{" "}
                                      {
                                        <Tag
                                          color={
                                            item.status === 1
                                              ? "success"
                                              : item.status === 0
                                              ? "warning"
                                              : "processing"
                                          }
                                        >
                                          {item.status === 1
                                            ? "Success"
                                            : item.status === 0
                                            ? "Pending"
                                            : "Failed"}
                                        </Tag>
                                      }
                                    </small>{" "}
                                    <br />
                                    <small>
                                      No.Seri : {item.seri_number}
                                    </small>{" "}
                                    <br />
                                    <small>
                                      IDTrx Mitra :{" "}
                                      {item.partner_transaction_code}
                                    </small>{" "}
                                    <br />
                                    <small>
                                      Transaction Date :{" "}
                                      {format(
                                        parseISO(item.created_at),
                                        "dd-MM-yyyy"
                                      )}
                                    </small>{" "}
                                    <br />
                                  </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>
  );
});