<template>
    <div class="ui-input">
        <template v-if="type">
            <component :is="InputComponents[type].component" v-bind="$attrs" :model-value="props.modelValue" @update:model-value="handleUpdate">
                <template v-for="(slot, name) in $slots" #[name]="raw">
                    <slot :name="name" v-bind="raw" />
                </template>
            </component>
            <slot />

            <!-- <p class="error-msg" v-if="error">{{ error }}</p> -->
        </template>
    </div>
</template>

<script setup lang="ts">
import { InputComponents, inputProps } from './input'
const props = defineProps(inputProps)

const emit = defineEmits(['update:modelValue'])
const handleUpdate = (newValue: string) => {
    emit('update:modelValue', newValue)
}
// const type = computed(() => (types[props.type] ? props.type : 'text'))
// const childProps = computed(() => {
//     if (props.type) {
//         const retain = InputComponents[props.type].props
//         console.log('retain', retain)
//         const cProps = {}
//         if (retain) {
//             for (let key in props) {
//                 console.log('key', key)
//                 if (Object.keys(retain).includes(key)) {
//                     cProps[key] = props[key]
//                 }
//             }
//             console.log('cProps', cProps)
//         }

//         return childProps
//     }
//     return false
// })

// console.log('childProps', childProps)
// const style = computed(() => {
//     const style = {}
//     const keys = Object.keys(childProps.value)

//     if (!keys.includes('width')) {
//         style.width = props.width
//     }

//     if (!keys.includes('height')) {
//         style.height = props.height
//     }

//     return style
// })
</script>
