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

export const CLASSNAME = 'OrderCreatedBySearchDropdown';

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

const createOption = (order: any): ListViewItem => {
    return {
        value: order.createdBy.id,
        label: `${order.createdBy?.firstName} ${order.createdBy?.lastName}`,
    };
};

const OrderCreatedBySearchDropdown: FC<Props> = props => {
    const { onChange, disabled, placeholder, selectedCreatedBy } = props;
    const getOrdersCreatedBy = useOwnershipDeliveryOrdersCreatedByQuery();

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

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

        return { data: uniqData };
    };

    return (
        <Select
            testId="Dropdown_orderCreatedBySearchDropdown"
            name="orderCreatedBySearchDropdown"
            onLoadOptions={onLoadOptionsHandler}
            disabled={disabled}
            onChange={order =>
                onChange({ createdBy: order?.value, tab: 'ownership' })
            }
            selectedValue={selectedCreatedBy}
            placeholder={placeholder}
            hideFilter
            compact
        ></Select>
    );
};

export default OrderCreatedBySearchDropdown;