<script setup>
import { NFormItem, NCard, NScrollbar } from 'naive-ui'
import {computed, ref, watch} from "vue";
const props = defineProps({
    header: {
        type: String,
        default: ''
    },
    feedback: {
        type: String,
        default: ''
    },
    minH: {
        type: [String, Number],
        default: null
    },
    maxH: {
        type: [String, Number],
        default: null
    },
    noPadding: {
        type: Boolean,
        default: false
    }
})

const hasHeader = computed(() => props.header.trim().length > 0)
const hasFeedback = computed(() => props.feedback.trim().length > 0)
const hasMinH = computed(() => props.minH.trim().length > 0 || Number.isInteger(props.minH))
const hasMaxH = computed(() => props.maxH.trim().length > 0 || Number.isInteger(props.maxH))

const styles = ref([])

watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
    const sizeStyles = []

    if (minH === null) return
    if (minH.trim().length > 0) {
        sizeStyles.push(`min-height: ${minH};`)
    } else if (Number.isInteger(minH)) {
        sizeStyles.push(`min-height: ${minH}px;`)
    }

    if (maxH === null) return
    if (maxH.trim().length > 0) {
        sizeStyles.push(`max-height: ${maxH};`)
    } else if (Number.isInteger(maxH)) {
        sizeStyles.push(`max-height: ${maxH}px;`)
    }

    styles.value = styles.value.concat(sizeStyles)
}, {
    immediate: true
})
</script>

<template>
    <NFormItem :show-label="hasHeader" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
        <NCard :class="noPadding ? 'no-padding h-full' : ''">
            <NScrollbar :style="styles">
                <slot />
            </NScrollbar>
        </NCard>
    </NFormItem>
</template>

<style scoped>
.no-padding :deep(.n-card__content) {
    padding: 0 !important;
}
</style>
