import { type RowComponentProps } from 'react-window';

import SelectableListItem, {
  type SelectableListItemProps,
} from '@composed-components/SelectableListItem';

export type CollapsibleSelectionListItemProps = {
  items: { id: number; name: string }[];
  selected: Set<number>;
  selectionLimit: number;
  handleItemSelect: (itemId: number) => void;
  itemRenderer: (item: { id: number; name: string }) => React.ReactNode;
} & Omit<
  SelectableListItemProps,
  'id' | 'onSelect' | 'selected' | 'disabled' | 'children'
>;

const CollapsibleSelectionListItem = ({
  handleItemSelect,
  index,
  items,
  selected,
  selectionLimit,
  style,
  itemRenderer,
  ...props
}: RowComponentProps<CollapsibleSelectionListItemProps>) => {
  const item = items[index];

  return (
    <div style={style}>
      <SelectableListItem
        key={item.id}
        id={item.id.toString()}
        sx={{ padding: 2, borderRadius: 1 }}
        onSelect={() => handleItemSelect(item.id)}
        disabled={
          !!selectionLimit &&
          !selected?.has(item.id) &&
          selected?.size >= selectionLimit
        }
        selected={selected?.has(item.id)}
        {...props}
      >
        {itemRenderer(item)}
      </SelectableListItem>
    </div>
  );
};

export default CollapsibleSelectionListItem;
