import type { FC } from 'react';
import React from 'react';
import { Select } from '@theorchard/suite-components';
import { uniqBy } from 'lodash';
import { useOwnershipDeliveryJobIdsQuery } from 'src/data/queries';
import type { SetParamsCallback } from 'src/utils';

export const CLASSNAME = 'OrderIdSearchDropdown';

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

const OrderIdJobSearchDropdown: FC<Props> = props => {
    const { onChange, disabled, placeholder, selectedOrderId } = props;
    const getJobOrderIds = useOwnershipDeliveryJobIdsQuery();

    const onLoadOptionsHandler = async (term?: string) => {
        const data =
            (await getJobOrderIds(term))?.map(({ orderId }) => {
                return {
                    label: orderId.toString(),
                    value: orderId.toString(),
                };
            }) ?? [];

        const uniqData = uniqBy(data, 'value');

        return { data: uniqData };
    };

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

export default OrderIdJobSearchDropdown;