import React, {FC, useMemo} from 'react';

import Select from 'react-select';
import {DropdownInputComponent as Input} from './parts/input/dropdown-input.component';
import {DropdownPlaceholderComponent as Placeholder} from './parts/placeholder/dropdown-placeholder.component';
import {DropdownValueContainerComponent as ValueContainer} from './parts/value-container/dropdown-value-container.component';
import {DropdownControlHOC as ControlHOC} from './parts/control/dropdown-control.component';
import {DropdownSingleValueComponent as SingleValue} from './parts/single-value/dropdown-single-value.component';
import {DropdownMenuComponent as Menu} from './parts/menu/dropdown-menu.component';
import {DropdownMenuListHOC as MenuListHOC} from './parts/menu-list/dropdown-menu-list.component';
import {DropdownOptionComponent as Option} from './parts/option/dropdown-option.component';
import {DropdownMultiComponent as Multi} from './parts/multi/dropdown-multi.component';
import {IDropdown} from './dropdown.type';

export const DropdownComponent: FC<IDropdown> = ({
    menuListHeader,
    menuListFooter,
    color = 'primary',
    ...props
}) => {
    const components = useMemo(
        () => ({
            Input,
            Placeholder,
            ValueContainer,
            IndicatorSeparator: () => <></>,
            Control: ControlHOC(props?.components?.InputStartAdornment),
            SingleValue,
            Menu,
            MenuList: MenuListHOC(menuListHeader, menuListFooter),
            Option,
            MultiValueContainer: Multi,
            MultiValue: Multi.Value,
            MultiValueLabel: Multi.Label,
            MultiValueRemove: Multi.Remove,
            ...props?.components,
        }),
        [],
    );
    return (
        <Select
            isSearchable
            placeholder=''
            isMulti
            theme={
                {
                    color,
                } as any
            }
            {...props}
            components={components}
        />
    );
};