import * as React from 'react';
import { ValueSelector } from '../ValueSelector';
import { useAdaptable } from '../../AdaptableContext';
import { useMemo, useCallback } from 'react';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
export const ModuleValueSelector = (props) => {
    const { options, value, onChange, selectionBoxPosition = 'top', ...valueSelectorProps } = props;
    const adaptable = useAdaptable();
    const selectedModulesMap = useMemo(() => {
        if (!value || !value.length) {
            return new Map();
        }
        return value.reduce((acc, val) => {
            acc.set(val, true);
            return acc;
        }, new Map());
    }, [value]);
    const allowReorder = useCallback((option) => {
        return selectedModulesMap.has(option);
    }, [selectedModulesMap]);
    const moduleLabelMap = useMemo(() => {
        const labelMap = new Map();
        options.forEach((module) => labelMap.set(module, adaptable.ModuleService.getModuleFriendlyName(module) ?? module));
        return labelMap;
    }, [options]);
    const sortedOptions = useMemo(() => {
        return ArrayExtensions.sortArrayWithOrder(options, value, { sortUnorderedItems: true });
    }, [allowReorder, options, value]);
    return (React.createElement(ValueSelector, { ...valueSelectorProps, options: sortedOptions, value: value, onChange: onChange, allowReorder: allowReorder, toIdentifier: (module) => module, toLabel: (module) => moduleLabelMap.get(module), selectionBoxPosition: selectionBoxPosition, isOptionDisabled: props.isOptionDisabled, disabled: props.disabled }));
};
