import type { FC } from 'react';
import React, { useMemo, useState } from 'react';
import { Dropdown } from '@theorchard/suite-components';
import {
    useLazyPhysicalOrderSearchQuery,
    useGetPhysicalOrderIdsQuery,
} from 'src/data/queries';
import { useDebounceCallback } from 'src/utils';
import type { DropdownOption } from '@theorchard/suite-components';
import type { GetPhysicalDeliveryOrderIds_physicalDeliveryOrders_orders as OrderIdsResult } from 'src/data/queries/physicalDeliveryOrders/__generated__/GetPhysicalDeliveryOrderIds';
import type { SetParamsCallback, InputChangeCallback } from 'src/utils';

export const CLASSNAME = 'OrderIdSearchDropdown';

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

const createOption = (order: OrderIdsResult): DropdownOption => ({
    value: order.id,
});

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

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

    const orderIdOptions = useMemo<DropdownOption[]>(() => {
        const options = [...(dataSource ?? [])].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;