import React, { useState, useEffect } from 'react';
import { MultiSelect } from '@theorchard/suite-components';
import { isEmpty, isArray } from 'lodash-es';
import { LabelType } from 'src/apollo/definitions/globalTypes';
import {
    useVendorById,
    useVendorSearch,
} from 'src/apollo/queries/vendor-search';
import type { GetVendorsQuery } from 'src/apollo/queries/vendor-search/__generated__/get-vendors';

type OrchardLabel = GetVendorsQuery['orchardLabelSearch'][0];

const SEARCH_PLACEHOLDER = 'Search for Label';

export interface LabelMultiSelectPropTypes {
    onChange: (params: any) => void;
    vendorCatalogIds: [];
}

const LabelMultiSelect: React.FC<LabelMultiSelectPropTypes> = ({
    onChange,
    vendorCatalogIds,
}) => {
    const selectName = 'vendorCatalogId';
    const [labelValues, setLabelValues] = useState<any>([]);
    const { data: vendorData, getVendorById } = useVendorById();
    const [currentVendorIds, setCurrentVendorIds] = useState([]);
    const [areVendorsLoaded, setAreVendorsLoaded] = useState(false);
    const getPromisedVendorSearch = useVendorSearch();

    const performSearch = async (term?: string) => {
        if (!term) return {};

        const trimmedTerm = term.trim().replace('\\', '');

        if (trimmedTerm) {
            const data = await getPromisedVendorSearch(
                trimmedTerm,
                LabelType.VENDOR,
                100,
                0
            );
            const searchResults =
                data?.map((row: OrchardLabel) => ({
                    label: `${row.name} (${row.id.vendorId})`,
                    value: row.id.vendorId.toString(),
                })) || [];
            return { data: searchResults };
        }
        return {};
    };

    const onItemChange = (e: any) => {
        const items = e && !isArray(e) ? [e] : e;
        onChange({
            target: {
                name: selectName,
                value: items?.map(({ value }: any) => value),
            },
        });
        setLabelValues(items);
        setAreVendorsLoaded(true);
    };

    useEffect(() => {
        if (isEmpty(vendorCatalogIds)) {
            setLabelValues([]);
        } else setCurrentVendorIds(vendorCatalogIds);
    }, [vendorCatalogIds]);

    useEffect(() => {
        if (!isEmpty(currentVendorIds)) {
            const vendorId = currentVendorIds[0];
            getVendorById(parseInt(vendorId, 10));
        }
    }, [currentVendorIds]);

    useEffect(() => {
        if (vendorData && vendorData.orchardLabel && !areVendorsLoaded) {
            const vendor = vendorData.orchardLabel;
            const item = {
                label: `${vendor.name} (${vendor.id.vendorId})`,
                value: vendor.id.vendorId,
            };
            setLabelValues([...labelValues, item]);
            if (currentVendorIds.length) {
                const newCurrentVendorIds = currentVendorIds.slice(1);
                if (newCurrentVendorIds.length)
                    setCurrentVendorIds([...currentVendorIds.slice(1)]);
                else setAreVendorsLoaded(true);
            }
        }
    }, [vendorData]);

    return (
        <MultiSelect
            className="label-select"
            id="labelSearch"
            onChange={onItemChange}
            onLoadOptions={performSearch}
            placeholder={SEARCH_PLACEHOLDER}
            selectedValue={labelValues}
            menuMinWidth="100%"
        />
    );
};

export default LabelMultiSelect;