import React from 'react';

import {MenuListProps} from 'react-select';
import {DropdownMenuListStyle as S} from './dropdown-menu-list.style';
import {components as RS} from 'react-select';
import type {
    IDropdownExtendedMenuComponent,
    IDropdownMenuList,
} from './dropdown-menu-list.type';

export const DropdownMenuListComponent: React.FC<IDropdownMenuList> = ({
    children,
    header,
    footer,
    ...rest
}) => {
    return (
        <S.Container>
            {!!header && header(rest?.selectProps)}
            <RS.MenuList {...rest}>{children}</RS.MenuList>
            {!!footer && footer(rest?.selectProps)}
        </S.Container>
    );
};

export const DropdownMenuListHOC =
    (
        header?: IDropdownExtendedMenuComponent,
        footer?: IDropdownExtendedMenuComponent,
    ) =>
    (menuListProps: MenuListProps) => (
        <DropdownMenuListComponent
            {...menuListProps}
            header={header}
            footer={footer}
        />
    );