import React from 'react';

import {useHistory} from 'react-router-dom';

import {
    getNodeHostLabel,
    getNodeHostPath,
} from '../../../components/NodeHostWrapper/NodeHostWrapper';
import {PAGINATED_TABLE_IDS, ResizeablePaginatedTable} from '../../../components/PaginatedTable';
import type {PaginatedTableData} from '../../../components/PaginatedTable';
import {useDatabaseFromQuery} from '../../../utils/hooks/useDatabaseFromQuery';
import {renderPaginatedTableErrorMessage} from '../../../utils/renderPaginatedTableErrorMessage';
import type {Column} from '../../../utils/tableUtils/types';

import {NODE_NETWORK_COLUMNS_WIDTH_LS_KEY} from './constants';
import {getNodePeers} from './helpers/getNodePeers';
import type {NodePeerRow} from './helpers/nodeNetworkMapper';
import i18n from './i18n';

interface NodeNetworkTableProps {
    nodeId: string;
    searchValue: string;
    columns: Column<NodePeerRow>[];
    scrollContainerRef: React.RefObject<HTMLElement>;
    onDataFetched?: (data: PaginatedTableData<NodePeerRow>) => void;
}

export function NodeNetworkTable({
    nodeId,
    searchValue,
    columns,
    scrollContainerRef,
    onDataFetched,
}: NodeNetworkTableProps) {
    const history = useHistory();
    const database = useDatabaseFromQuery();
    const filters = React.useMemo(
        () => ({
            nodeId,
            searchValue: searchValue.trim() || undefined,
        }),
        [nodeId, searchValue],
    );

    const renderEmptyDataMessage = React.useCallback(() => i18n('alert_no-network-data'), []);

    return (
        <ResizeablePaginatedTable
            getKeyboardRowKey={(node) => node.NodeId}
            getKeyboardRowLabel={getNodeHostLabel}
            onKeyboardActivate={(node) => {
                const nodePath = getNodeHostPath(node, database);
                if (nodePath) {
                    history.push(nodePath);
                }
            }}
            columnsWidthLSKey={NODE_NETWORK_COLUMNS_WIDTH_LS_KEY}
            scrollContainerRef={scrollContainerRef}
            columns={columns}
            fetchData={getNodePeers}
            filters={filters}
            tableName={PAGINATED_TABLE_IDS.NODE_PEERS}
            renderErrorMessage={renderPaginatedTableErrorMessage}
            renderEmptyDataMessage={renderEmptyDataMessage}
            onDataFetched={onDataFetched}
        />
    );
}