import React from 'react';
import { Menu } from 'react-aria-components';
import classNames from 'classnames';

import { useDropdownContext } from '../DropdownButtonContext';

import { DropdownButtonListContextProvider } from './DropdownButtonListContext';

interface DropdownButtonListProps extends React.PropsWithChildren {
  closeOnAction: boolean;
  label?: string;
}

export const DropdownButtonList: React.FC<DropdownButtonListProps> = ({ children, closeOnAction, label, ...rest }) => {
  const { mobileView } = useDropdownContext();

  const validChildren = React.Children.map(children, child => (React.isValidElement(child) ? child : null));
  const orderedValidChildren = mobileView ? validChildren?.toReversed() : validChildren;

  return (
    <DropdownButtonListContextProvider closeOnAction={closeOnAction}>
      <Menu
        {...rest}
        className={classNames('dropdownButton__list', { 'dropdownButton__list--mobileView': mobileView })}
        aria-label={label}
      >
        {orderedValidChildren}
      </Menu>
    </DropdownButtonListContextProvider>
  );
};