import type { FC } from 'react';
import React, { useCallback } from 'react';
import { Select } from '@theorchard/suite-components';
import { useArtistSearchQuery } from 'src/data/queries';
import type { Artist } from 'src/data/types';
import type { DropdownOption, SearchableDropdownOption } from 'src/types';

export const CLASSNAME = 'ArtistSearchDropdown';

export interface Props {
    id?: string;
    disabled?: boolean;
    menuWidth?: string;
    placeholder: string;
    testId?: string;
    accountId?: string;
    subaccountId?: number;
    selectedArtist?: Artist;
    selectedSiblingArtistId?: string;
    onChange: (data?: Artist) => void;
}

const createLabel = (artist: Artist): string =>
    `${artist.name} • ${artist.artistInfo?.[0]?.id}`;

const createOption = (artist: Artist): DropdownOption<Artist> => ({
    label: createLabel(artist),
    value: artist.id,
    data: artist,
});

const ArtistSearchDropdown: FC<Props> = props => {
    const {
        id,
        disabled,
        onChange,
        menuWidth,
        placeholder,
        testId,
        accountId,
        selectedArtist,
        selectedSiblingArtistId,
    } = props;
    const [executeSearch] = useArtistSearchQuery();
    let { subaccountId } = props;
    subaccountId = Number(subaccountId);

    const onChangeHandler = useCallback(
        (newValue?: SearchableDropdownOption<Artist>) => {
            onChange(newValue?.data);
        },
        [onChange]
    );

    const onLoadOptionsHandler = async (name?: string) => {
        const vendorId = Number(accountId);
        const limit = 10;
        const offset = 0;
        if (name) {
            const searchArtistData = await executeSearch({
                variables: { name, vendorId, subaccountId, limit, offset },
            });
            return {
                data:
                    searchArtistData
                        ?.filter(
                            option =>
                                option.id !== selectedSiblingArtistId &&
                                option.artistInfo?.[0]?.id
                        )
                        .map(createOption) ?? [],
            };
        }
        return {};
    };

    return (
        <Select
            id={id}
            name="artistSearchDropdown"
            className={CLASSNAME}
            disabled={disabled}
            onLoadOptions={onLoadOptionsHandler}
            onChange={onChangeHandler}
            placeholder={placeholder}
            testId={testId}
            menuWidth={menuWidth}
            selectedValue={
                selectedArtist ? createLabel(selectedArtist) : undefined
            }
        />
    );
};

export default ArtistSearchDropdown;