import React from 'react';

import type {ColumnWidthByName} from '@gravity-ui/react-data-table';

import {useTableResize} from '../../utils/hooks/useTableResize';
import {TableSkeleton} from '../TableSkeleton/TableSkeleton';

import type {PaginatedTableProps} from './PaginatedTable';
import {PaginatedTable} from './PaginatedTable';
import {b} from './shared';
import type {Column} from './types';

function updateColumnsWidth<T>(columns: Column<T>[], columnsWidthSetup: ColumnWidthByName) {
    return columns.map((column) => {
        return {...column, width: columnsWidthSetup[column.name] ?? column.width};
    });
}

interface ResizeablePaginatedTableProps<T, F>
    extends Omit<PaginatedTableProps<T, F>, 'onColumnsResize'> {
    columnsWidthLSKey: string;
    containerClassName?: string;
}

export function ResizeablePaginatedTable<T, F>({
    columnsWidthLSKey,
    columns,
    containerClassName,
    ...props
}: ResizeablePaginatedTableProps<T, F>) {
    const [tableColumnsWidth, setTableColumnsWidth, isTableWidthLoading] =
        useTableResize(columnsWidthLSKey);

    const updatedColumns = React.useMemo(
        () => updateColumnsWidth(columns, tableColumnsWidth),
        [columns, tableColumnsWidth],
    );

    if (isTableWidthLoading) {
        return <TableSkeleton />;
    }

    return (
        <PaginatedTable
            columns={updatedColumns}
            onColumnsResize={setTableColumnsWidth}
            containerClassName={b('resizeable-table-container', containerClassName)}
            {...props}
        />
    );
}