import React, { useState } from 'react';
import { useAccountSearchQuery } from 'src/apollo/queries/account';
import SearchableSelectList from 'src/components/shared/searchable-select-list';
import { getAccountDropdownOptions } from 'src/utils/account';
import type { DropdownOption } from '@theorchard/suite-components';

const ACCOUNT_SEARCH_PLACEHOLDER = 'Search for Accounts';

export interface AccountSearchPropType {
    accountSearchResults?: [];
    className?: string;
    clearable?: boolean;
    disabled?: boolean;
    testId?: string;
    placeholder?: string;
    selectedOption?: any;
}

const useAccountSearch = ({
    accountSearchResults = [],
    className = '',
    clearable = true,
    disabled = false,
    testId = 'accountSearch',
    placeholder = ACCOUNT_SEARCH_PLACEHOLDER,
    selectedOption = '',
}: AccountSearchPropType) => {
    const [searchTerm, setSearchTerm] = useState<string>('');
    const [searchResults, setSearchResults] = useState<DropdownOption[]>([]);
    const [selectedAccount, setSelectedAccount] = useState<DropdownOption>();
    const getPromisedAccountSearch = useAccountSearchQuery();

    const clearSelect = () => {
        if (!clearable) return;

        setSelectedAccount(undefined);
        setSearchResults([]);
        setSearchTerm('');
    };

    const handleSelectChange = (e: any) => {
        if (e) {
            setSelectedAccount({ label: e.label, value: e.value });
        } else {
            setSelectedAccount(undefined);
            setSearchTerm('');
            setSearchResults([]);
        }
    };

    const performSearch = async (term: string) => {
        const trimmedTerm = term.trim();
        setSearchTerm(trimmedTerm);
        const data = await getPromisedAccountSearch(trimmedTerm, 100, 0);
        const searchResults = getAccountDropdownOptions(data);
        setSearchResults(searchResults);
        return searchResults;
    };

    const renderAccountSearch = () => (
        <SearchableSelectList
            className={className}
            clearable={clearable}
            defaultOptions={searchResults || accountSearchResults}
            disabled={disabled}
            id="accountSearch"
            isLoading={false}
            onChange={handleSelectChange}
            onLoadOptionsHandler={performSearch}
            placeholder={placeholder}
            searchTerm={searchTerm}
            testId={testId}
            value={selectedAccount || selectedOption}
        />
    );

    return {
        accountId: selectedAccount?.value,
        accountName: selectedAccount?.label,
        renderAccountSearch,
        clearSelect,
    };
};

export default useAccountSearch;