import { h, defineComponent, ref, computed, nextTick, toRef } from 'vue';
import commonProps from '../../tag/src/common-props';
import { AddIcon } from '../../_internal/icons';
import { NButton } from '../../button';
import { NSpace } from '../../space';
import { NInput } from '../../input';
import { NTag } from '../../tag';
import { NBaseIcon } from '../../_internal';
import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
import { warn, call, smallerSize } from '../../_utils';
import { dynamicTagsLight } from '../styles';
import style from './styles/index.cssr';
import { useMergedState } from 'vooks';
const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { closable: {
        type: Boolean,
        default: true
    }, defaultValue: {
        type: Array,
        default: () => []
    }, value: Array, inputStyle: [String, Object], tagStyle: [String, Object], 
    // eslint-disable-next-line vue/prop-name-casing
    'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
    // deprecated
    onChange: {
        type: [Function, Array],
        validator: () => {
            if (process.env.NODE_ENV !== 'production') {
                warn('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
            }
            return true;
        },
        default: undefined
    } });
export default defineComponent({
    name: 'DynamicTags',
    props: dynamicTagsProps,
    setup(props) {
        const { mergedClsPrefixRef } = useConfig(props);
        const { localeRef } = useLocale('DynamicTags');
        const formItem = useFormItem(props);
        const inputValueRef = ref('');
        const showInputRef = ref(false);
        const inputForceFocusedRef = ref(true);
        const inputInstRef = ref(null);
        const themeRef = useTheme('DynamicTags', 'DynamicTags', style, dynamicTagsLight, props, mergedClsPrefixRef);
        const uncontrolledValueRef = ref(props.defaultValue);
        const controlledValueRef = toRef(props, 'value');
        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
        const localizedAddRef = computed(() => {
            return localeRef.value.add;
        });
        const inputSizeRef = computed(() => {
            return smallerSize(props.size);
        });
        function doChange(value) {
            const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
            const { nTriggerFormInput, nTriggerFormChange } = formItem;
            if (onChange)
                call(onChange, value);
            if (onUpdateValue)
                call(onUpdateValue, value);
            if (_onUpdateValue)
                call(_onUpdateValue, value);
            uncontrolledValueRef.value = value;
            nTriggerFormInput();
            nTriggerFormChange();
        }
        function handleCloseClick(index) {
            const tags = mergedValueRef.value.slice(0);
            tags.splice(index, 1);
            doChange(tags);
        }
        function handleInputKeyUp(e) {
            switch (e.code) {
                case 'Enter':
                case 'NumpadEnter':
                    handleInputConfirm();
            }
        }
        function handleInputConfirm() {
            if (inputValueRef.value) {
                const tags = mergedValueRef.value.slice(0);
                tags.push(inputValueRef.value);
                doChange(tags);
            }
            showInputRef.value = false;
            inputForceFocusedRef.value = true;
            inputValueRef.value = '';
        }
        function handleInputBlur() {
            handleInputConfirm();
        }
        function handleAddClick() {
            showInputRef.value = true;
            void nextTick(() => {
                var _a;
                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
                inputForceFocusedRef.value = false;
            });
        }
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            inputInstRef,
            localizedAdd: localizedAddRef,
            inputSize: inputSizeRef,
            inputValue: inputValueRef,
            showInput: showInputRef,
            inputForceFocused: inputForceFocusedRef,
            mergedValue: mergedValueRef,
            handleInputKeyUp,
            handleAddClick,
            handleInputBlur,
            handleCloseClick,
            mergedTheme: themeRef,
            cssVars: computed(() => {
                const { self: { inputWidth } } = themeRef.value;
                return {
                    '--input-width': inputWidth
                };
            })
        };
    },
    render() {
        const { mergedTheme, cssVars, mergedClsPrefix } = this;
        return (h(NSpace, { class: `${mergedClsPrefix}-dynamic-tags`, size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
            default: () => {
                const { mergedTheme, tagStyle, type, round, size, color, closable, disabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick } = this;
                return this.mergedValue
                    .map((tag, index) => (h(NTag, { key: index, theme: mergedTheme.peers.Tag, themeOverrides: mergedTheme.peerOverrides.Tag, style: tagStyle, type: type, round: round, size: size, color: color, closable: closable, disabled: disabled, onClose: () => handleCloseClick(index) }, { default: () => tag })))
                    .concat(showInput ? (h(NInput, { ref: "inputInstRef", autosize: true, value: inputValue, onUpdateValue: (v) => {
                        this.inputValue = v;
                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, style: inputStyle, size: inputSize, placeholder: "", onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused })) : (h(NButton, { dashed: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: inputSize, onClick: handleAddClick }, {
                    icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
                })));
            }
        }));
    }
});
