/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { Verb } from '@data-wrangling-components/core';
import { enumName } from '@data-wrangling-components/utilities';
import { ContextualMenuItemType } from '@fluentui/react';
import { useCallback, useEffect, useMemo, useState } from 'react';
// TODO: use core Tags for this
const groups = [
    {
        label: 'Aggregates',
        verbs: [
            'aggregate',
            'groupby',
            'ungroup',
            'pivot',
            'orderby',
            'unorder',
            'rollup',
            'unroll',
            'window', 
        ]
    },
    {
        label: 'Transform column',
        verbs: [
            'bin',
            'binarize',
            'convert',
            'erase',
            'fill',
            'impute',
            'recode'
        ]
    },
    {
        label: 'Combine columns',
        verbs: [
            'boolean',
            'derive',
            'fold',
            'unfold',
            'onehot',
            'merge',
            'spread'
        ]
    },
    {
        label: 'Filter & Select',
        verbs: [
            'fetch',
            'filter',
            'rename',
            'sample',
            'select'
        ]
    },
    {
        label: 'Joins & Sets',
        verbs: [
            'concat',
            'dedupe',
            'difference',
            'intersect',
            'join',
            'lookup',
            'union', 
        ]
    }, 
];
/**
 * Create a set of menu items using the groups to sort into sections
 * @returns
 */ function useMenuItems() {
    return useMemo(()=>groups.map((group)=>({
                key: `__section-${group.label}__`,
                itemType: ContextualMenuItemType.Section,
                sectionProps: {
                    title: group.label,
                    items: group.verbs.map((verb)=>{
                        const found = Object.entries(Verb).find((v)=>v[1] === verb);
                        return {
                            key: found[1],
                            text: found[0]
                        };
                    })
                }
            })), []);
}
/**
 * Business logic to manage a list of items, a filtered copy, and a search handler
 */ export function useSearchableItems() {
    const items = useMenuItems();
    const [filtered1, setFiltered] = useState(items);
    const onSearch = useCallback((filtered)=>setFiltered(filtered), [
        setFiltered
    ]);
    const onSearchReset = useCallback(()=>setFiltered(items), [
        items
    ]);
    return {
        items,
        filtered: filtered1,
        onSearch,
        onSearchReset
    };
}
/**
 * Creates a controlled component by accepting a verb from outside, but also tracking internally with an effect
 * @param verb
 * @param onChange - handler for verb changes via dropdown or dropdown + click
 * @param requireClick - indicates that the button click handler must be invoked for onChange to fure
 * @returns
 */ export function useSelectedOption(verb, onChange, requireButtonClick, placeholder) {
    const [selected, setSelected] = useState(verb);
    useEffect(()=>{
        verb && setSelected(verb);
    }, [
        verb
    ]);
    const onButtonClick = useCallback(()=>{
        selected && onChange?.(selected);
    }, [
        selected,
        onChange
    ]);
    const onItemClick = useCallback((_e, opt)=>{
        if (opt) {
            setSelected(opt.key);
            !requireButtonClick && onChange?.(opt.key);
        }
    }, [
        requireButtonClick,
        onChange,
        setSelected
    ]);
    const text = useDropdownButtonText(selected, placeholder);
    return {
        text,
        onButtonClick,
        onItemClick
    };
}
/**
 * Displays either the selected option or the placeholder
 * @param selected
 * @param placeholder
 * @returns
 */ export function useDropdownButtonText(selected, placeholder) {
    return useMemo(()=>{
        return enumName(Verb, selected) || placeholder;
    }, [
        selected,
        placeholder
    ]);
}
