import React, { ReactNode } from "react";
import { useResourceListRow } from "./resource-list-row-provider";

export type ResourceListFieldProps<
    T extends object,
    N extends string | number | symbol = keyof T
> = {
    colSpan?: number;
    enableSorting?: boolean;
    label?: string;
    name?: N;
    render?: (value: N extends keyof T ? T[N] : undefined, row: T) => ReactNode;
};

export const ResourceListField = <
    T extends object,
    N extends string | number | symbol = keyof T
>(props: ResourceListFieldProps<T, N>) => {
    const {
        name,
        render
    } = props;

    const {
        row: item
    } = useResourceListRow<T>();

    if(render) {
        return render(
            (name && name in item ? item[name as unknown as keyof T] : undefined) as N extends keyof T ? T[N] : undefined,
            item
        );
    }

    return (
        <>
            <pre>{JSON.stringify(name ? item[name as unknown as keyof T] : null, null, 4)}</pre>
        </>
    );
};