import * as React from 'react';
import { useListBoxSection } from 'react-aria';
import type { Node } from 'react-stately';

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

import { MultiSelectOption } from './MultiSelectOption';

interface MultiSelectSectionProps<T> extends Pick<CommonInputProps, 'error' | 'warning'> {
  section: Node<T>;
  state: MultiSelectState<T>;
  mode: 'content' | 'dropdown' | undefined;
}

export const MultiSelectSection = <T,>({
  section,
  state,
  error,
  warning,
  mode,
  ...rest
}: MultiSelectSectionProps<T>) => {
  rest satisfies Record<PropertyKey, never>;

  const { itemProps, headingProps, groupProps } = useListBoxSection({
    heading: section.rendered,
    'aria-label': section['aria-label'],
  });

  return (
    <>
      <DataList.Section {...rest} {...itemProps} {...groupProps}>
        {section.rendered && <DataList.Section.Header {...headingProps}>{section.rendered}</DataList.Section.Header>}
        {[...section.childNodes].map(node => (
          <MultiSelectOption key={node.key} item={node} state={state} error={error} warning={warning} mode={mode} />
        ))}
      </DataList.Section>
    </>
  );
};