import type { FC } from 'react';
import React from 'react';
import { Select } from '@theorchard/suite-components';
import { useAccountsQuery } from 'src/data/queries';
import { recordAccountFilter } from 'src/utils/segment/filterEvents';
import type { Account } from 'src/data/types';

export const CLASSNAME = 'AccountSearchDropdown';
export const TEST_ID = 'Select_accountSearchDropdown';

export interface Props {
    disabled?: boolean;
    onChange: (data?: Account) => void;
    accountId?: number;
    placeholder: string;
    hasNrContributions?: boolean;
}

const AccountSearchDropdown: FC<Props> = ({
    onChange,
    disabled,
    accountId,
    placeholder,
    hasNrContributions,
}) => {
    const getAccountsSearch = useAccountsQuery(hasNrContributions);

    const onLoadOptionsHandler = async (term?: string) => {
        const data = (await getAccountsSearch(term))?.map(artist => {
            return {
                label: artist.name,
                value: `${artist.id}`,
                data: artist,
            };
        });
        return { data };
    };

    return (
        <Select
            name="accountSearchDropdown"
            className={CLASSNAME}
            testId={TEST_ID}
            onChange={account => {
                onChange(account?.data);
                recordAccountFilter(account?.data?.name);
            }}
            onLoadOptions={onLoadOptionsHandler}
            disabled={disabled}
            selectedValue={accountId ? `${accountId}` : undefined}
            placeholder={accountId ? '' : placeholder}
            compact
        />
    );
};

export default AccountSearchDropdown;