"use client";
import { getWithdrawalListApi, InfoDayListRequest, UserWithdrawalList } from "@/api/summary";
import Table from "@/components/Table";
import { Pagination } from "@/types";
import { getToken } from "@/utils/Cookies";
import dayjs from "dayjs";
import { useTranslations } from "next-intl";
import { FC, useRef, useState } from "react";
import "./page.scss";

interface Props {}
const App: FC<Props> = (props) => {
    const t = useTranslations("PaymentsPage");
    const [dataSource, setDataSource] = useState<{
        list: UserWithdrawalList[];
        page: Partial<Pagination>;
    }>({
        list: [],
        page: {},
    });
    const params = useRef<InfoDayListRequest>({
        current_page: 1,
        page_size: 40,
    });
    const [hasMore, setHasMore] = useState(true);

    const token = getToken();

    const loadMore = async () => {
        await getData({
            ...params.current,
        });
    };
    const getData = async (params: InfoDayListRequest) => {
        if (!token) {
            setHasMore(false);
            return;
        }
        try {
            const res = await getWithdrawalListApi(params);
            setDataSource((val) => ({ ...val, list: [...val.list, ...res.data] }));
            setHasMore(!res.page.is_end!);
        } catch (error) {
            setHasMore(false);
            return Promise.reject();
        }
    };

    const columns = [
        {
            title: t("Data"),
            dataIndex: "withdrawal_time",
            width: "0.4rem",
            render: (item: UserWithdrawalList) => {
                return (
                    <span className={"text-[#009d80]"}>
                        {dayjs(item.withdrawal_time! * 1000).format("MM/DD")}
                    </span>
                );
            },
        },
        {
            title: t("Detalhe"),
            dataIndex: "withdrawal_detail",
            width: "0.6rem",
        },
        {
            title: t("Comissão"),
            dataIndex: "withdrawal_amount",
        },
        {
            title: t("Status"),
            dataIndex: "withdrawal_status",
            render: (item: UserWithdrawalList) => {
                return <span>{item.withdrawal_status === 1 ? "Success" : ""}</span>;
            },
        },
    ];

    return (
        <div className="content">
            <div className="referralPayment referral-router-view">
                <Table
                    columns={columns}
                    dataSource={dataSource.list}
                    loadMore={loadMore}
                    hasMore={hasMore}
                    maxHeight={"78dvh"}
                ></Table>
            </div>
        </div>
    );
};
export default App;
