import type { Component, Ref } from 'vue'
import type { VvInputTextPropsTypes } from '.'
import { INPUT_TYPES } from '.'
import VvInputClearAction from '../common/VvInputClearAction'
import VvInputPasswordAction from '../common/VvInputPasswordAction'
import VvInputStepAction from '../common/VvInputStepAction'
import VvIcon from '../VvIcon/VvIcon.vue'

export default function VvInputTextActionsFactory(
    type: typeof INPUT_TYPES[keyof typeof INPUT_TYPES],
    parentProps: VvInputTextPropsTypes,
    isDirty: Ref<boolean>,
): Component {
    return {
        name: 'VvInputTextActions',
        components: {
            VvIcon,
            VvInputPasswordAction,
            VvInputStepAction,
            VvInputClearAction,
        },
        setup() {
            const isDisabled = computed(() => {
                return parentProps.disabled || parentProps.readonly
            })

            return {
                isDirty,
                isDisabled,
                labelStepUp: parentProps.labelStepUp,
                labelStepDown: parentProps.labelStepDown,
                labelShowPassword: parentProps.labelShowPassword,
                labelHidePassword: parentProps.labelHidePassword,
                labelClear: parentProps.labelClear,
                iconShowPassword: parentProps.iconShowPassword,
                iconHidePassword: parentProps.iconHidePassword,
            }
        },
        render() {
            let actions = null
            switch (type) {
                case INPUT_TYPES.SEARCH: {
                    const { onClear } = this.$attrs
                    actions = [
                        h(VvInputClearAction, {
                            disabled: this.isDisabled || !this.isDirty,
                            label: this.labelClear,
                            onClear,
                        }),
                    ]
                    break
                }
                case INPUT_TYPES.PASSWORD: {
                    const { onTogglePassword } = this.$attrs
                    actions = [
                        h(VvInputPasswordAction, {
                            disabled: this.isDisabled,
                            onTogglePassword,
                            labelShow: this.labelShowPassword,
                            labelHide: this.labelHidePassword,
                            iconShow: this.iconShowPassword,
                            iconHide: this.iconHidePassword,
                        }),
                    ]
                    break
                }
                case INPUT_TYPES.NUMBER: {
                    const { onStepUp, onStepDown } = this.$attrs
                    actions = [
                        h(VvInputStepAction, {
                            mode: 'up',
                            disabled:
								this.isDisabled
								|| (parentProps.max !== undefined
								    && parentProps.modelValue === parentProps.max),
                            label: this.labelStepUp,
                            onStepUp,
                            onStepDown,
                        }),
                        h(VvInputStepAction, {
                            mode: 'down',
                            disabled:
								this.isDisabled
								|| (parentProps.min !== undefined
								    && parentProps.modelValue === parentProps.min),
                            label: this.labelStepDown,
                            onStepUp,
                            onStepDown,
                        }),
                    ]
                    break
                }
            }

            return Array.isArray(actions)
                ? h('div', { class: 'vv-input-text__actions-group' }, actions)
                : actions
        },
    }
}