import { InfiniteScroll } from "antd-mobile";
import clsx from "clsx";
import { FC, JSX, ReactNode } from "react";
type position = "left" | "right" | "center";
export interface TableHeaderItem {
    title: string | JSX.Element;
    dataIndex: string;
    width?: string | number;
    align?: position;
    render?: (data: any, index?: number) => ReactNode;
}
interface Props {
    // 表头
    columns: TableHeaderItem[];
    // 数据源
    dataSource: unknown[];
    // 表格最大高度
    maxHeight?: number | string;
    //  距离底部阈值
    threshold?: number;
    // loadMore 加载更多
    loadMore: (isRetry: boolean) => Promise<void>;
    hasMore: boolean;
    isLoadMore?: boolean;
    isBackground?: boolean;
}

/**
 * @description 带滚动翻页的表格
 */

const TheadItem = ({ headItem }: { headItem: TableHeaderItem }) => {
    const cls = clsx(`text-${headItem.align || "right"}`);
    return <th className={cls}>{headItem.title}</th>;
};
const TbodyItem = ({ data, config, index, children }: any) => {
    const cls = clsx(`text-${config.align || "right"} text-[0.10rem]`);
    if (config.type && config.type === "index") {
        return <td className={cls}>{index}</td>;
    }
    return (
        // <td className={cls} style={{ textAlign: config.align || "right" }}>
        <td className={cls}>{children ? children : <span>{data[config.dataIndex]}</span>}</td>
    );
};

const Table: FC<Props> = (props) => {
    const {
        columns,
        loadMore,
        dataSource,
        maxHeight,
        hasMore,
        threshold = 100,
        isLoadMore = true,
        isBackground = false,
    } = props;

    const cls = clsx(" table-header-group text-[grey] text-[.11rem]");

    const bodyCls = clsx(maxHeight ? ` max-h-[${maxHeight}]` : "", "overflow-y-scroll");

    const headerTrCls = clsx(
        "h-[40px] border-b-1 border-[#e8e8e8]",
        isBackground && "odd:bg-[#dedede] even:bg-[#d1d1d1]"
    );
    const colGroup = columns.map((item, index) => {
        return <col key={index} style={{ width: item.width }} />;
    });

    return (
        <div className={"w-[100%] text-[#000]"}>
            <table className={"w-[100%]"} style={{ tableLayout: "fixed" }}>
                <colgroup>{colGroup}</colgroup>
                <thead className={cls}>
                    <tr className={headerTrCls}>
                        {columns.map((headItem, index) => (
                            <TheadItem headItem={headItem} key={index}></TheadItem>
                        ))}
                    </tr>
                </thead>
            </table>

            <div className={bodyCls} style={{ maxHeight: maxHeight }}>
                <table className={"w-[100%]"} style={{ tableLayout: "fixed" }}>
                    <colgroup>{colGroup}</colgroup>
                    <tbody className={""}>
                        {dataSource.map((item, index) => (
                            <tr key={index} className={`${headerTrCls} text-center text-[#999]`}>
                                {columns.map((head, headIndex) => (
                                    <TbodyItem
                                        index={index + 1}
                                        data={item}
                                        config={head}
                                        key={headIndex}
                                    >
                                        {head.render && head.render(item, index)}
                                    </TbodyItem>
                                ))}
                            </tr>
                        ))}
                    </tbody>
                </table>

                {isLoadMore && (
                    <InfiniteScroll loadMore={loadMore} hasMore={hasMore}></InfiniteScroll>
                )}
            </div>
        </div>
    );
};

export default Table;
