import { useCallback, useMemo, type ReactNode } from "react";
import type { BUN_SQLITE_WGUI_HOSTS } from "@/db/types/db";
import type { ClientRouteView } from "@/src/functions/backend/acme/decorate-client-route";
import DataTable from "../data-table";
import buildClientRoutesTableColumns from "./client-routes-table-columns";
import ClientRouteMobileCard from "./client-route-mobile-card";

type Props = {
    routes?: ClientRouteView[];
    hosts_by_id?: Map<number, BUN_SQLITE_WGUI_HOSTS>;
    show_host?: boolean;
    loading?: boolean;
    empty?: ReactNode;
    onDeleted?: ({ id }: { id: number }) => void;
};

export default function ClientRoutesTable({
    routes,
    hosts_by_id,
    show_host,
    loading,
    empty,
    onDeleted,
}: Props) {
    const columns = useMemo(
        () =>
            buildClientRoutesTableColumns({
                onDeleted,
                hosts_by_id,
                show_host,
            }),
        [onDeleted, hosts_by_id, show_host],
    );

    const MobileItem = useCallback(
        ({ item }: { item: ClientRouteView }) => (
            <ClientRouteMobileCard
                route={item}
                hosts_by_id={hosts_by_id}
                show_host={show_host}
                onDeleted={onDeleted}
            />
        ),
        [hosts_by_id, show_host, onDeleted],
    );

    return (
        <DataTable
            caption="Client routes"
            items={routes}
            columns={columns}
            getKey={({ item }) => Number(item.id)}
            loading={loading}
            empty={empty}
            skeleton_rows={3}
            MobileItem={MobileItem}
        />
    );
}