import React, { FC, useCallback, useMemo } from 'react';
import { formatMessage } from '@theorchard/suite-frontend';
import { DropdownOption } from 'src/components/dropdown';
import SearchableDropdown from 'src/components/searchableDropdown';
import { FILTER_DEBOUNCE } from 'src/constants';
import { useOrchardVendorSearchQuery, Vendor } from 'src/data/queries';

export interface Props {
    disabled?: boolean;
    onChange: (data?: Vendor) => void
    vendor?: Vendor;
}

export const getOptionName = (vendor: Vendor) =>
    `${vendor.name} - ${vendor.id}`;

const createOption = (vendor: Vendor): DropdownOption<Vendor> => ({
    label: getOptionName(vendor),
    value: vendor.id,
    data: vendor
});

const VendorSearch: FC<Props> = (props) => {
    const { onChange, disabled, vendor } = props;
    const [executeSearch, { data: searchData, loading }] = useOrchardVendorSearchQuery();

    const handleInputChange = useCallback((searchTerm: string) => {
        if (searchTerm)
            executeSearch({ variables: { term: searchTerm } });
    }, [executeSearch]);

    const handleClearable = (option?: DropdownOption) => Boolean(option?.value);

    const vendorOptions = useMemo<DropdownOption<Vendor>[]>(() => {
        const options = [...searchData ?? []].map(createOption);
        return options;
    }, [searchData]);

    const handleChange = useCallback((vendorName?: string, value?: string, data?: Vendor) => {
        if (!value)
            executeSearch({});
        onChange(data);
    }, [onChange, executeSearch]);

    let selectedOption;
    if (vendor?.name)
        selectedOption = createOption(vendor);

    const formatOptionLabel = (
        option: DropdownOption<Vendor>
    ) => (
        <div>
            <div className="SongSearchName">
                {option.label}
            </div>
        </div>
    );

    const isLoading = loading && !searchData;

    return (
        <SearchableDropdown
            name="vendorSearch"
            className="VendorSearch"
            onChange={handleChange}
            onInputChange={handleInputChange}
            options={vendorOptions}
            disabled={disabled}
            debounceTimeout={FILTER_DEBOUNCE}
            selectedOption={selectedOption}
            clearable={handleClearable}
            hideIfEmpty={false}
            formatOptionLabel={formatOptionLabel}
            loading={isLoading}
            placeholder={formatMessage('repertoire.accountSearch')}
        />
    );
};

export default VendorSearch;