import { GridTable } from '@theorchard/suite-components';
import React from 'react';
import type { FC } from 'react';
import type { Territory } from 'src/types';

export interface TerritoryListProps {
    title: string;
    territories: Territory[];
    setSelectedTerritories: (territories: Territory[]) => void;
}

export const TerritoryList: FC<TerritoryListProps> = ({
    title,
    territories,
    setSelectedTerritories,
}) => {
    const emptyStateComponent = <div></div>;
    const minWidth = '210px';

    return (
        <GridTable
            className={`TerritoryList-${title}`}
            data={territories}
            selectable={true}
            rowKey="countryId"
            disableRowHoverHighlight={true}
            emptyStateComponent={emptyStateComponent}
            onSelectedRowsChanged={rowIds =>
                setSelectedTerritories(
                    territories.filter(terr => rowIds.includes(terr.countryId))
                )
            }
        >
            <GridTable.Column minWidth={minWidth} title={title} name="name" />
        </GridTable>
    );
};

export default TerritoryList;