import React, { type FC, useMemo, useState } from 'react';
import { Dropdown, type DropdownOption } from '@theorchard/suite-components';
import {
    useGetDeliveryOrdersQuery,
    useDeliveryOrderSearchQuery,
    type DeliveryOrders,
    type OrdersResult,
} from 'src/data/queries';
import { type SetParamsCallback } from 'src/utils/route';
import { type InputChangeCallback, useDebounceCallback } from '../utils';

export const CLASSNAME = 'OrderIdSearchDropdown';

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

const createOption = (order: DeliveryOrders): DropdownOption => ({
    value: order.orderId,
});

const OrderIdSearchDropdown: FC<Props> = props => {
    const { onChange, disabled, placeholder, selectedOrderId } = props;
    const [term, setTerm] = useState<string>();
    const [executeSearch, { data: searchData, loading }] =
        useDeliveryOrderSearchQuery();
    const { data: listData } = useGetDeliveryOrdersQuery({ limit: 100 });
    const dataSource: OrdersResult | undefined = term ? searchData : listData;

    const handleInputChange = useDebounceCallback<InputChangeCallback>(
        (searchTerm: string, { action }) => {
            setTerm(searchTerm);
            if (action !== 'menu-close')
                executeSearch({
                    variables: { filters: { orderId: searchTerm } },
                });
        },
        300
    );

    const orderIdOptions = useMemo<DropdownOption[]>(() => {
        const options = [...(dataSource?.items ?? [])].map(createOption);
        return options;
    }, [dataSource]);

    let selectedOption: DropdownOption | null = null;
    if (selectedOrderId) selectedOption = { value: selectedOrderId };

    const isLoading = loading && !searchData;

    return (
        <Dropdown.Custom
            type="Select"
            name="orderIdSearchDropdown"
            className={CLASSNAME}
            onChange={(order: DropdownOption | null) =>
                onChange({ orderId: order?.value })
            }
            onInputChange={handleInputChange}
            options={orderIdOptions}
            isDisabled={disabled}
            isLoading={isLoading}
            value={selectedOption}
            placeholder={placeholder}
            isClearable
            controlled
        />
    );
};

export default OrderIdSearchDropdown;