import React, {useContext, useEffect} 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 routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.USER_DETAIL,
      name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
    },
  ];
console.log(id)
  useEffect(() => {
    (async () => {
      modalLoader.setLoading(true);
      await Promise.allSettled([
        store.authentication.getProfile(),
        store.transaction.getDataHistoryTopUp(id),
        store.transaction.getDataHistoryTransaction(),
      ]);
      modalLoader.setLoading(false);
    })()
  }, []);

  const columns = [
    {
      title: 'Markup Price',
      dataIndex: 'mark_up_price',
      key: 'mark_up_price',
      width: '20%',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: '50%',
    },
    {
      title: 'Transaction Date',
      dataIndex: 'created_at',
      key: 'created_at',
      render: (text, record) => {
        return (
          <Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
        )
      },
    },
  ]

  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.transaction.data.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Role</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Saldo Supplier</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData?.username}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Saldo System</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData.roles?.name}</Text>
              </Col>
              <Col span={12}>
                <Text strong>Status</Text>
              </Col>
              <Col span={12}>
                <Text>{store.authentication.profileData.superior?.username}</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.authentication.profileData?.wallet}</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.dataHistoryTransaction}
                bordered
              />
            </div>
          </Col>
        </Row>
        <div/>
      </Card>
    </div>
  )
});