import type { FC } from 'react';
import React from 'react';
import { Select } from '@theorchard/suite-components';
import {
    type OrderIds,
    useOwnershipDeliveryOrderIdsQuery,
} from 'src/data/queries';
import type { ListViewItem } from '@theorchard/suite-components';
import type { SetParamsCallback } from 'src/utils';

export const CLASSNAME = 'OrderIdSearchDropdown';

export interface Props {
    disabled?: boolean;
    onChange: SetParamsCallback;
    placeholder: string;
    selectedOrderId?: string;
}

const createOption = (order: OrderIds): ListViewItem => ({
    value: order.id,
    label: order.id,
});

const OrderIdSearchDropdown: FC<Props> = props => {
    const { onChange, disabled, placeholder, selectedOrderId } = props;
    const getOrderIdsSearch = useOwnershipDeliveryOrderIdsQuery();

    const onLoadOptionsHandler = async (term?: string) => {
        const data = (await getOrderIdsSearch(term))?.map(createOption) ?? [];

        return { data: data };
    };

    return (
        <Select
            testId="Dropdown_orderIdSearchDropdown"
            onLoadOptions={onLoadOptionsHandler}
            disabled={disabled}
            onChange={order => onChange({ orderId: order?.value })}
            selectedValue={selectedOrderId}
            placeholder={placeholder}
            compact
        ></Select>
    );
};

export default OrderIdSearchDropdown;