/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Expando, MultiDropdown } from '@essex/components';
import { Checkbox, ComboBox, Dropdown, Position, SpinButton, TextField } from '@fluentui/react';
import merge from 'lodash-es/merge.js';
import noop from 'lodash-es/noop.js';
import { Fragment, memo, useMemo } from 'react';
import { Case, Switch, When } from 'react-if';
import { useCheckboxChangeHandler, useComboBoxChangeHandler, useComboBoxInputValueChangeHandler, useDropdownChangeAllHandler, useDropdownChangeHandler, useSpinButtonChangeHandler, useTextFieldChangeHandler } from '../hooks/index.js';
import { checkboxStyles, dropdownStyles } from '../styles.js';
import { useSortedInputs } from './VerbForm.hooks.js';
import { Container, InputsBlock, Row } from './VerbForm.styles.js';
export var FormInputType;
(function(FormInputType) {
    FormInputType["SingleChoice"] = 'single_choice';
    FormInputType["MultiChoice"] = 'multi_choice';
    FormInputType["ComboBox"] = 'combobox';
    FormInputType["NumberSpinner"] = 'number_spinner';
    FormInputType["Checkbox"] = 'checkbox';
    FormInputType["Text"] = 'text';
})(FormInputType || (FormInputType = {}));
/**
 * Generates a component for editing verbs based on declarative config.
 */ export const VerbForm = /*#__PURE__*/ memo(function VerbInput({ inputs , step , onChange  }) {
    // split the inputs into visible and expando based on the advanced flag
    const { regular , advanced , showAdvanced  } = useSortedInputs(inputs);
    const regularRows = useMemo(()=>mapInputs(regular, step, onChange), [
        regular,
        onChange,
        step
    ]);
    const advancedRows = useMemo(()=>mapInputs(advanced, step, onChange), [
        advanced,
        onChange,
        step
    ]);
    return /*#__PURE__*/ _jsxs(Container, {
        children: [
            /*#__PURE__*/ _jsx(InputsBlock, {
                children: regularRows
            }),
            /*#__PURE__*/ _jsx(When, {
                condition: showAdvanced,
                children: /*#__PURE__*/ _jsx(Expando, {
                    label: 'Advanced',
                    children: /*#__PURE__*/ _jsx(InputsBlock, {
                        children: advancedRows
                    })
                })
            })
        ]
    });
});
function mapInputs(inputs, step, onChange) {
    return inputs.map((input, index)=>/*#__PURE__*/ _jsx(Input, {
            input: input,
            step: step,
            onChange: onChange
        }, `verb-${input.label}-${index}`));
}
const Input = /*#__PURE__*/ memo(function Input({ input , step , onChange  }) {
    const condition = input.if ?? true;
    const inputType = input.type;
    return !condition ? null : /*#__PURE__*/ _jsx(Row, {
        children: /*#__PURE__*/ _jsxs(Switch, {
            children: [
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.SingleChoice,
                    children: /*#__PURE__*/ _jsx(SingleChoiceInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                }),
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.MultiChoice,
                    children: /*#__PURE__*/ _jsx(MultiChoiceInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                }),
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.NumberSpinner,
                    children: /*#__PURE__*/ _jsx(NumberSpinnerInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                }),
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.Checkbox,
                    children: /*#__PURE__*/ _jsx(CheckboxInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                }),
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.Text,
                    children: /*#__PURE__*/ _jsx(TextInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                }),
                /*#__PURE__*/ _jsx(Case, {
                    condition: inputType === FormInputType.ComboBox,
                    children: /*#__PURE__*/ _jsx(ComboBoxInput, {
                        input: input,
                        step: step,
                        onChange: onChange
                    })
                })
            ]
        })
    });
});
const SingleChoiceInput = /*#__PURE__*/ memo(function SingleChoiceInput({ step , input: { label , placeholder , current , required , options , disabled , wrapper: Wrapper = Fragment , onChange: updater ,  } , onChange ,  }) {
    const dropdownChangeHandler = useDropdownChangeHandler(step, updater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(Dropdown, {
            required: required,
            label: label,
            disabled: disabled,
            placeholder: placeholder,
            styles: dropdownStyles,
            selectedKey: current,
            options: options,
            onChange: dropdownChangeHandler
        })
    });
});
const MultiChoiceInput = /*#__PURE__*/ memo(function MultiChoiceInput({ step , input: { label , placeholder , current , required , options , disabled , wrapper: Wrapper = Fragment , onChange: updater , onChangeAll: allUpdater ,  } , onChange ,  }) {
    const dropdownChangeHandler = useDropdownChangeHandler(step, updater, onChange);
    const dropdownChangeAllHandler = useDropdownChangeAllHandler(step, allUpdater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(MultiDropdown, {
            required: required,
            label: label,
            placeholder: placeholder,
            styles: dropdownStyles,
            selectedKeys: current,
            options: options,
            disabled: disabled,
            onChange: dropdownChangeHandler,
            onChangeAll: dropdownChangeAllHandler
        })
    });
});
const ComboBoxInput = /*#__PURE__*/ memo(function ComboBoxInput({ step , input: { label , placeholder , current , required , options , disabled , wrapper: Wrapper = Fragment , onChange: updater , onInputValueChange , allowFreeform ,  } , onChange ,  }) {
    const changeHandler = useComboBoxChangeHandler(step, updater, onChange);
    const valueChangeHandler = useComboBoxInputValueChangeHandler(step, onInputValueChange || noop, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(ComboBox, {
            required: required,
            label: label,
            placeholder: placeholder,
            styles: dropdownStyles,
            selectedKey: current,
            text: allowFreeform === true ? current : '',
            options: options,
            disabled: disabled,
            onChange: changeHandler,
            onInputValueChange: valueChangeHandler,
            allowFreeform: allowFreeform,
            autoComplete: 'off'
        })
    });
});
const NumberSpinnerInput = /*#__PURE__*/ memo(function NumberSpinnerInput({ step , input: { label , placeholder , current , min , max , step: spinStep , disabled , wrapper: Wrapper = Fragment , onChange: updater , styles ,  } , onChange ,  }) {
    const changeHandler = useSpinButtonChangeHandler(step, updater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(SpinButton, {
            label: label,
            labelPosition: Position.top,
            placeholder: placeholder,
            min: min,
            max: max,
            step: spinStep,
            value: current ? `${current}` : '',
            onChange: changeHandler,
            disabled: disabled,
            styles: merge({}, dropdownStyles, styles)
        })
    });
});
const CheckboxInput = /*#__PURE__*/ memo(function CheckboxInput({ step , input: { label , required , current , wrapper: Wrapper = Fragment , onChange: updater , disabled , styles ,  } , onChange ,  }) {
    const changeHandler = useCheckboxChangeHandler(step, updater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(Checkbox, {
            label: label,
            required: required,
            checked: current,
            onChange: changeHandler,
            disabled: disabled,
            styles: merge({}, checkboxStyles, styles)
        })
    });
});
const TextInput = /*#__PURE__*/ memo(function TextInput({ step , input: { label , placeholder , required , current , wrapper: Wrapper = Fragment , onChange: updater , disabled , styles ,  } , onChange ,  }) {
    const changeHandler = useTextFieldChangeHandler(step, updater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(TextField, {
            label: label,
            placeholder: placeholder,
            required: required,
            value: current,
            onChange: changeHandler,
            disabled: disabled,
            styles: merge({}, dropdownStyles, styles)
        })
    });
});
