import React, { type FC, useCallback, useMemo, useState } from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { useNrDeliveryStoresQuery } from 'src/data/queries';
import { type GetDeliveryStores_deliveryStoresV2_items as DeliveryStore } from 'src/data/queries/getNrDeliveryStores/__generated__/GetDeliveryStores';
import { type DropdownOption, type SearchableDropdownOption } from 'src/types';
import { type SetParamsCallback } from 'src/utils/route';

export const CLASSNAME = 'DeliveryStoresDropdown';

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

const createOption = (store: DeliveryStore): DropdownOption<DeliveryStore> => ({
    label: store.name,
    value: store.id,
    data: store,
});

const DeliveryStoresDropdown: FC<Props> = props => {
    const [storeName, setStoreName] = useState<string | undefined>(undefined);
    const { onChange, disabled, storeId, placeholder } = props;
    const { data } = useNrDeliveryStoresQuery();
    const storeOptions = useMemo<DropdownOption<DeliveryStore>[]>(() => {
        const options = [...(data ?? [])].map(createOption);
        return options;
    }, [data]);

    const handleChange = useCallback(
        (newValue?: SearchableDropdownOption<DeliveryStore>) => {
            setStoreName(newValue?.label);
            onChange({ store: newValue?.value });
        },
        [onChange]
    );

    let selectedOption: DropdownOption<DeliveryStore> | null = null;
    if (storeId)
        selectedOption = createOption({ id: storeId, name: storeName ?? '' });

    return (
        <Dropdown
            name="deliveryStoresDropdown"
            className={CLASSNAME}
            onChange={handleChange}
            options={storeOptions}
            isDisabled={disabled}
            value={selectedOption}
            placeholder={placeholder}
            isClearable
            controlled
        />
    );
};

export default DeliveryStoresDropdown;