import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Checkbox, ComboBox, Dropdown, Position, SpinButton, TextField } from '@fluentui/react';
import merge from 'lodash-es/merge.js';
import noop from 'lodash-es/noop';
import { Fragment, memo, useMemo } from 'react';
import { Case, Switch } from 'react-if';
import styled from 'styled-components';
import { useCheckboxChangeHandler, useComboBoxChangeHandler, useComboBoxInputValueChangeHandler, useDropdownChangeHandler, useSpinButtonChangeHandler, useTextFieldChangeHandler } from '../hooks/index.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 = {}));
export const VerbForm = /*#__PURE__*/ memo(function VerbInput({ inputs , step , onChange  }) {
    const rows = useMemo(()=>inputs.map((input, index)=>/*#__PURE__*/ _jsx(Input, {
                input: input,
                step: step,
                onChange: onChange
            }, `verb-${input.label}-${index}`)), [
        inputs,
        onChange,
        step
    ]);
    return /*#__PURE__*/ _jsx(Container, {
        children: rows
    });
});
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 ,  } , onChange ,  }) {
    const dropdownChangeHandler = useDropdownChangeHandler(step, updater, onChange);
    return /*#__PURE__*/ _jsx(Wrapper, {
        children: /*#__PURE__*/ _jsx(Dropdown, {
            required: required,
            label: label,
            placeholder: placeholder,
            styles: dropdownStyles,
            selectedKeys: current,
            options: options,
            disabled: disabled,
            onChange: dropdownChangeHandler,
            multiSelect: true
        })
    });
});
const ComboBoxInput = /*#__PURE__*/ memo(function ComboBoxInput({ step , input: { label , placeholder , current , required , options , disabled , wrapper: Wrapper = Fragment , onChange: updater , onInputValueChange ,  } , 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,
            options: options,
            disabled: disabled,
            onChange: changeHandler,
            onInputValueChange: valueChangeHandler
        })
    });
});
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 , 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,
            checked: current,
            onChange: changeHandler,
            disabled: disabled,
            styles: merge({}, dropdownStyles, styles)
        })
    });
});
const TextInput = /*#__PURE__*/ memo(function TextInput({ step , input: { label , 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,
            value: current,
            onChange: changeHandler,
            disabled: disabled,
            styles: merge({}, dropdownStyles, styles)
        })
    });
});
const dropdownStyles = {
    root: {
        width: 220
    }
};
const Container = styled.div`
	display: flex;
	flex-direction: column;
`;
const Row = styled.div`
	margin-bottom: 8px;
`;
