<script lang="ts" setup>
import { Article_Section_Default } from './index';
import { enumPageSectionLayouts } from "@/definitions/enum";

const _props = defineProps<{
    settings?: any,
    content?: any
    section: any
}>()

const definedDynamicSection: Record<string, any> = {
    'Article_Default': Article_Section_Default,
    [`Article_${enumPageSectionLayouts.VERTICAL_TWO}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.VERTICAL_LEFT_TWO}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.VERTICAL_RIGHT_TWO}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.VERTICAL_THREE}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.VERTICAL_FOUR}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_ONE}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_TWO}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_THREE}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_FOUR}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_FIVE}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_SIX}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_SEVEN}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_EIGHT}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_NINE}`]: Article_Section_Default,
    [`Article_${enumPageSectionLayouts.HORIZONTAL_TEN}`]: Article_Section_Default,
}

const getCurrentSection = computed(() => `${_props.settings.template}_${_props.settings.layout}`);

const GET_PROPS = computed(() => {
    return () => {
        let props: any = {};
        if (_props.settings) {
            for (const [key, value] of _props.settings ? Object.entries(_props.settings) : []) {
                props = {
                    ...props,
                    [key]: value
                }
            }
        }
        return props;
    };
})
</script>

<template>
    <component :is="definedDynamicSection[getCurrentSection] || null" v-bind="{ ...(GET_PROPS()), section: _props.section, content: _props.content, settings: _props.settings }">
        <slot />
    </component>
</template>
