import React from 'react';
import { SearchDropdown } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { SEARCH_NO_RESULTS_FOUND } from 'src/constants';
import type { DropdownOption } from '@theorchard/suite-components';
import './searchable-select-list.scss';

interface SearchDropdownOption extends DropdownOption {
    isRecent: boolean;
    isLastRecent: boolean;
}

export interface SearchableSelectListPropTypes {
    cacheOptions?: boolean;
    className?: string;
    clearable?: boolean;
    defaultValue?: DropdownOption;
    disabled?: boolean;
    id: string;
    isLoading?: boolean;
    isMultiSelect?: boolean;
    onChange: any;
    placeholder: string;
    defaultOptions: DropdownOption[] | SearchDropdownOption[];
    searchTerm?: string;
    testId?: string;
    value?: DropdownOption | undefined;
    onBlur?: any;
    onLoadOptionsHandler?: any;
}

export const SearchableSelectList: React.FC<SearchableSelectListPropTypes> = ({
    cacheOptions = false,
    className = '',
    clearable = false,
    defaultValue,
    disabled = false,
    id,
    isLoading = false,
    isMultiSelect = false,
    onBlur,
    onChange,
    placeholder,
    defaultOptions = [],
    searchTerm = '',
    testId,
    value,
    onLoadOptionsHandler,
}) => {
    const noResultsMessage = () => {
        if (!isLoading && !searchTerm) return 'Type to begin search...';
        if (!isLoading && searchTerm) return SEARCH_NO_RESULTS_FOUND;
    };

    const handleFormatOptionLabel = (option: any) => {
        if (!option) return null;
        if (option?.isRecent)
            return (
                <div
                    className={
                        option?.isLastRecent
                            ? 'GlobalSearchResults-divider'
                            : ''
                    }
                >
                    <GlyphIcon name="clock" size={16} /> {option.label}
                </div>
            );
        return <div>{option.label}</div>;
    };

    return (
        <div
            className="GlobalSearchResults"
            data-testid="searchableSelectListTestid"
        >
            <span>
                <SearchDropdown
                    cacheOptions={cacheOptions}
                    className={`GlobalSearchResultsSelect ${className}`}
                    closeMenuOnSelect={!isMultiSelect}
                    debounceTime={500}
                    defaultValue={defaultValue}
                    defaultOptions={defaultOptions}
                    id={id}
                    isClearable={clearable}
                    isDisabled={disabled}
                    isLoading={isLoading}
                    isMulti={isMultiSelect}
                    testId={testId}
                    formatOptionLabel={handleFormatOptionLabel}
                    noOptionsMessage={noResultsMessage}
                    onBlur={onBlur}
                    onChange={onChange}
                    onLoadOptions={onLoadOptionsHandler}
                    placeholder={placeholder}
                    value={value}
                />
            </span>
        </div>
    );
};

export default SearchableSelectList;