import React from 'react';
import { MultiSelect } from '@theorchard/suite-components';

export interface ServiceMultiSelectPropTypes {
    className?: string;
    services: { label: string; value: string }[];
    onChange: (params: any) => void;
    placeholder?: string;
    portalElement?: HTMLElement;
    selectedValue: string | string[];
}

export const ServiceMultiSelect: React.FC<ServiceMultiSelectPropTypes> = ({
    className = '',
    services,
    onChange,
    placeholder = '',
    portalElement,
    selectedValue,
}) => {
    const selectedOptions = services?.filter(({ value }) =>
        Array.isArray(selectedValue)
            ? selectedValue?.includes(value)
            : selectedValue === value
    );

    return (
        <MultiSelect
            className={`SelectService ${className}`}
            onChange={onChange}
            options={services}
            placeholder={placeholder}
            portalElement={portalElement}
            selectedValue={selectedOptions}
            testId="ServiceMultiSelect"
        />
    );
};