import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Row, Table, Typography,} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {FilterOutlined} from "@ant-design/icons";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
import {useParams} from "react-router-dom";

const {Title, Text} = Typography;

export const DetailUser = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);
  const {id} = useParams();
  const [visibleModal, setVisibleModal] = useState(false);
  const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
  const [destination, setDestination] = useState(null);
  const [initialData, setInitialData] = useState({});
  const [confirmLoading, setConfirmLoading] = useState(false);

  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
        store.transaction.getDataHistoryTopUp(id),
        store.membership.getDetail(id),
      ]);
      modalLoader.setLoading(false);
    })();
  }, []);

  const columns = [
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
    },
    {
      title: "Transaction Date",
      dataIndex: "transaction_date",
      key: "transaction_date",
      render: (text, record) => {
        return (
          <Text>
            {format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
          </Text>
        );
      },
    },
  ];

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: "/app/membership",
      name: <span style={{fontWeight: "bold"}}>Membership</span>,
    },
    {
      route: LINKS.USER_DETAIL.replace(":id", id),
      name: <span style={{fontWeight: "bold"}}>Detail User</span>,
    },
  ];
  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.superior?.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 justify={"center"}>
              <Col lg={24} xs={12}>
                <Title strong level={3} style={styleSaldoTitle}>
                  Saldo
                </Title>
              </Col>
              <Col lg={24} xs={12}>
                <Text style={styleSaldoContent}>
                  {store.transaction?.data.amount}
                </Text>
              </Col>
            </Row>
          </Col> */}
        </Row>
        <Row>
          <Col span={24}>
            <div>
              <Title strong level={3}>
                History Top Up
              </Title>

              <Button
                style={{ marginBottom: "1rem" }}
                onClick={() => {
                  console.log("clicked filter");
                }}
              >
                <FilterOutlined />
                Filter
              </Button>
              <Table
                columns={columns}
                dataSource={store.transaction.dataHistoryTopUp}
                bordered
              />
            </div>
          </Col>
        </Row>
        <div />
      </Card>
    </div>
  );
});