import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Row, Table,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {PaybackModal} from "./PaybackModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";

const {Search} = Input;

export const PaybackFromUser = observer(() => {
  const store = useStore();
  const [initialData, setInitialData] = useState({});
  const modalLoader = useContext(ModalLoaderContext);

  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        await Promise.allSettled([
          store.payback.getDataUser(),
          store.authentication.getProfile()
        ]);
        modalLoader.setLoading(false);
      } catch (e) {
        modalLoader.setLoading(false);
        if (e.response?.body?.message) {
          message.error(e.response.body.message);
          return;
        }
        message.error(e.message);
      }
    };

    init();
  }, []);


  const columns = [
    {
      title: "Picture",
      dataIndex: "image_prove",
      key: "image_prove",
      render: (text, record) => (
        <Image
          src={record.image_prove}
          style={{width: 50, height: 50}}
          shape="circle"
          alt="avatar"
        />
      ),
    },
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
      render: (text) =>
          new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR",
          }).format(text),
    },
  ];

  const routeData = [
    {
      route: LINKS.HOME,
      name: "Home",
    },
    {
      route: LINKS.PAYBACK_FROM_USER,
      name: <span style={{fontWeight: "bold"}}>Payback User</span>,
    },
  ];

  return (
    <div className={["ppob-container"].join(" ")}>
      <BreadcumbComponent data={routeData}/>
      <Card>
        <div>
          <Row style={{marginBottom: 20}}>
            <Col span={12}>
              <Button>
                <FilterOutlined/>
                Filter
              </Button>
            </Col>
            <Col span={12} style={{textAlign: "right"}}>
              <Search
                placeholder="input search text"
                style={{
                  width: store.ui.mediaQuery.isMobile ? 160 : 200,
                  marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
                  marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
                }}
              />
              {store.authentication.userData.role !== "Admin" && (
                <Button
                  onClick={() => {
                    setInitialData({});
                    store.payback.visibleModalPayback = true;
                  }}
                >
                  <PlusSquareOutlined/> New
                </Button>
              )}
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
            <Table
                key="1"
                hasEmpty
                columns={columns}
                dataSource={store.payback.dataPaybackUser}
                bordered
                pagination={{
                  pageSize: store.payback.pageSizePaybackUser,
                  total: store.payback.total_dataPaybackUser,
                  current: store.payback.pageSizePaybackUser + 1,
                  showSizeChanger: true,
                  simple: false
                }}
                onChange={async (page) => {
                  let pageNumber = page.current;
                  store.payback.pageSizePaybackUser = page.pageSize;
                  store.payback.pageSizePaybackUser = pageNumber - 1;
                  modalLoader.setLoading(true);
                  //await store.payback.getDataUser();
                  modalLoader.setLoading(false);
                }}
            />
          )}

          {store.ui.mediaQuery.isMobile && (
            <List
              itemLayout="horizontal"
              position={"top"}
              pagination={{
                onChange: async (page) => {
                  store.payback.pageSizePaybackUser = page.pageSize;
                  store.payback.pageSizePaybackUser = page.current;
                  modalLoader.setLoading(true);
                  await store.payback.getDataUser();
                  modalLoader.setLoading(false);
                },
                pageSize: store.payback.pageSizePaybackUser,
                total: store.payback.total_dataPaybackUser,
                current: store.payback.pageSizePaybackUser,
                style: {marginBottom: "1rem", marginRight: "1rem"},
              }}
              dataSource={store.payback.dataPaybackUser}
              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={{}}>
                            <Image src={item.image_prove} preview={false}/>
                          </div>
                        }
                      />
                      <div style={{marginRight: 16}}>
                        <p
                          style={{
                            fontSize: 9,
                            margin: 0,
                          }}
                        >
                          {item.amount}
                        </p>
                      </div>
                    </List.Item>
                    <Divider plain style={{margin: 0}}/>
                  </div>
                );
              }}
            />
          )}
        </div>
      </Card>

      <PaybackModal
        initialData={initialData}
      />
    </div>
  );
});