import type { FC } from 'react';
import React from 'react';
import { useMemo } from 'react';
import { useCallback } from 'react';
import { Select } from '@theorchard/suite-components';
import {
    usePubSongWritersQuery,
    usePubSongWritersSearchQuery,
} from 'src/data/queries/pubSongWriters';
import type { SongWriter } from 'src/data/types';
import type { SearchableDropdownOption } from 'src/types';

export const CLASSNAME = 'SongWriterSearchDropdown';

export interface Props {
    pubWriterId?: string;
    disabled?: boolean;
    onChange: (data?: SongWriter) => void;
    placeholder: string;
    testId?: string;
    menuWidth?: string;
}

const createOption = (sw: SongWriter) => ({
    label: `${sw.name}`,
    subtitle: `${sw.pubWriterId} • ${sw.vendor.name}`,
    value: `${sw.pubWriterId}`,
    data: sw,
});

const SongWriterSearchDropdown: FC<Props> = ({
    disabled,
    onChange,
    placeholder,
    testId,
    menuWidth,
    pubWriterId,
}) => {
    const { data: swData } = usePubSongWritersQuery();
    const [executeSearch] = usePubSongWritersSearchQuery();

    const swOptions = useMemo(
        () => [...(swData ?? [])].map(createOption),
        [swData]
    );

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

    const onLoadOptionsHandler = async (term?: string) => {
        if (term) {
            const searchSongWriterData = await executeSearch({
                variables: {
                    filter: isNaN(parseInt(term))
                        ? { legalNameSearch: term }
                        : { pubWriterIDs: [parseInt(term)] },
                },
            });
            return { data: searchSongWriterData?.map(createOption) ?? [] };
        }
        return {};
    };

    return (
        <Select
            name="songWriterSearchDropdown"
            className={CLASSNAME}
            disabled={disabled}
            onChange={onChangeHandler}
            onLoadOptions={onLoadOptionsHandler}
            placeholder={placeholder}
            testId={testId}
            options={swOptions}
            menuWidth={menuWidth}
            selectedValue={pubWriterId}
        />
    );
};

export default SongWriterSearchDropdown;