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

const {Search} = Input;

export const Payback = observer(() => {
  const store = useStore();
  const modalLoader = useContext(ModalLoaderContext);

  useEffect(() => {
    const init = async () => {
      try {
        modalLoader.setLoading(true);
        await store.payback.getData();
        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.picture}
          style={{width: 50, height: 50}}
          shape="circle"
          alt="avatar"
        />
      ),
    },
    {
      title: "Amount",
      dataIndex: "amount",
      key: "amount",
    },
    {
      title: "Action",
      dataIndex: "amount",
      key: "action",
      render: (text, record) => (
          <Space size="middle">
            <Button
                onClick={async () => {
                  await handleAction(record, "accept");
                }}
                icon={<CheckCircleOutlined/>}
                style={{
                  backgroundColor: "#1bb91d",
                  color: "#fff",
                  borderColor: "#1bb91d",
                }}
            >
              Accept
            </Button>
            <Button
                onClick={async () => {
                  await handleAction(record, "reject");
                }}
                icon={<CloseOutlined/>}
                style={{
                  backgroundColor: "#ff1c1c",
                  color: "#fff",
                  borderColor: "#ff1c1c",
                }}
            >
              Reject
            </Button>
          </Space>
      ),
    },
  ];

  if (store.authentication.userData.role === "Retail") columns.pop();

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

  const onSubmit = async (data) => {
    modalLoader.setLoading(true);
    try {
      // await store.payback.create(data);
      // message.success("Success Add New Member");
      // await store.payback.getData();
    } catch (e) {
      console.error(e, "apa errornya");
      message.error("Failed Add Member");
    }
    modalLoader.setLoading(false);
  };

  const handleAction = async (record, type) => {
  };

  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({});
                    setVisibleModal(true);
                  }}
                >
                  <PlusSquareOutlined /> New
                </Button>
              )} */}
            </Col>
          </Row>
          {store.ui.mediaQuery.isDesktop && (
              <Table
                  key="1"
                  hasEmpty
                  columns={columns}
                  dataSource={store.payback.data}
                  bordered
                  pagination={{
                    pageSize: store.payback.page,
                    total: store.payback.total_data,
                    current: store.payback.pageSize + 1,
                    showSizeChanger: true,
                    simple: false
                  }}
                  onChange={async (page) => {
                    let pageNumber = page.current;
                    store.payback.pageSize = page.pageSize;
                    store.payback.page = pageNumber - 1;
                    modalLoader.setLoading(true);
                    await store.payback.getData();
                    modalLoader.setLoading(false);
                  }}
              />
          )}

          {store.ui.mediaQuery.isMobile && (
              <List
                  itemLayout="horizontal"
                  position={"top"}
                  pagination={{
                    onChange: async (page) => {
                      store.payback.pageSize = page.pageSize;
                      store.payback.page = page.current;
                      modalLoader.setLoading(true);
                      await store.payback.getData();
                      modalLoader.setLoading(false);
                    },
                    pageSize: store.payback.pageSize,
                    total: store.payback.total_data,
                    current: store.payback.page,
                    style: {marginBottom: "1rem", marginRight: "1rem"},
                  }}
                  dataSource={store.payback.data}
                  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.picture} 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>
    </div>
  );
});