import * as React from 'react';
import type { AriaListBoxOptions } from 'react-aria';
import { useListBox, useObjectRef } from 'react-aria';

import { forwardRef } from '../../../../utils/forwardRef';
import { DataList } from '../../../DataList/DataList';
import type { CommonInputProps } from '../../types';
import type { MultiSelectState } from '../hooks/useMultiSelectState';

import { MultiSelectOption } from './MultiSelectOption';
import { MultiSelectSection } from './MultiSelectSection';

interface MultiSelectListProps<T> extends AriaListBoxOptions<T>, Pick<CommonInputProps, 'error' | 'warning'> {
  state: MultiSelectState<T>;
  mode?: 'content' | 'dropdown';
  isDisabled?: boolean;
  emptyListLabel: string;
  'aria-label'?: string;
}

export const MultiSelectList = forwardRef(function MultiSelectList<T>(
  {
    state,
    isDisabled,
    error,
    warning,
    mode,
    emptyListLabel,
    'aria-label': ariaLabel,
    ...props
  }: MultiSelectListProps<T>,
  forwardedRef: React.ForwardedRef<HTMLDivElement>
) {
  const ref = useObjectRef(forwardedRef);

  const { listBoxProps } = useListBox(
    {
      ...props,
      'aria-label': ariaLabel,
      disallowEmptySelection: true,
    },
    state,
    ref
  );

  return (
    <DataList
      {...listBoxProps}
      ref={ref}
      aria-disabled={isDisabled}
      divider={false}
      dense={mode === 'content'}
      inset={mode === 'content'}
    >
      {state.collection.size === 0 && <DataList.Empty>{emptyListLabel}</DataList.Empty>}
      {[...state.collection].map(item =>
        item.type === 'section' ? (
          <MultiSelectSection key={item.key} section={item} state={state} warning={warning} error={error} mode={mode} />
        ) : (
          <MultiSelectOption key={item.key} item={item} state={state} warning={warning} error={error} mode={mode} />
        )
      )}
    </DataList>
  );
});