import React, {FC} from 'react';

import {ControlProps, components as RS} from 'react-select';
import {DropdownControlStyle as S} from './dropdown-control.style';
import {
    IDropdownControl,
    IDropdownExtendedControl,
} from './dropdown-control.type';

export const DropdownControlComponent: FC<IDropdownControl | any> = ({
    startAdornment,
    ...props
}) => {
    return (
        <S.Container isFocused={props?.isFocused} color={props?.theme?.color}>
            <RS.Control {...props}>
                {!!startAdornment && (
                    <S.AdornmentContainer>
                        {typeof startAdornment === 'function'
                            ? startAdornment(props?.selectProps)
                            : startAdornment}
                    </S.AdornmentContainer>
                )}
                {props.children}
            </RS.Control>
        </S.Container>
    );
};

export const DropdownControlHOC =
    (startAdornment?: IDropdownExtendedControl['startAdornment']) =>
    (dropdownControl: ControlProps) => (
        <DropdownControlComponent
            {...dropdownControl}
            startAdornment={startAdornment}
        />
    );