"use client";
import { getInfoDayList, InfoDayListRequest, UserTodayInfoList } 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("ReportPage");
    const [dataSource, setDataSource] = useState<{
        list: UserTodayInfoList[];
        page: Partial<Pagination>;
    }>({
        list: [],
        page: {},
    });

    const [hasMore, setHasMore] = useState(true);
    const params = useRef<InfoDayListRequest>({
        current_page: 1,
        page_size: 40,
    });
    const token = getToken();
    const loadMore = async () => {
        await getData({
            ...params.current,
        });
    };
    const getData = async (params: InfoDayListRequest) => {
        if (!token) {
            setHasMore(false);
            return;
        }
        try {
            const res = await getInfoDayList(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: "day",
            width: "0.4rem",
            render: (item: UserTodayInfoList) => {
                return (
                    <span className={"text-[#009d80]"}>
                        {dayjs(+item.day! * 1000).format("MM/DD")}
                    </span>
                );
            },
        },
        {
            title: t("inscriptions"),
            dataIndex: "reg_count",
            width: "0.6rem",
        },
        {
            title: t("validBet"),
            dataIndex: "register_new",
            render: (item: UserTodayInfoList) => (
                <span>
                    {item.effective_amount}[{item.register_new}]
                </span>
            ),
        },
        {
            title: t("agentLevel"),
            dataIndex: "level",
        },
        {
            title: t("commission"),
            dataIndex: "commissar",
            width: "0.7rem",
        },
    ];
    return (
        <div className="content">
            <div className="report referral-router-view">
                <Table
                    columns={columns}
                    dataSource={dataSource.list}
                    loadMore={loadMore}
                    hasMore={hasMore}
                    maxHeight={"78dvh"}
                ></Table>
            </div>
        </div>
    );
};
export default App;
