<script lang="ts" setup>
import { layouts } from "@/definitions/enum";

import { 
    BASE_LAYOUT,
    ARTICLE_SHORT_LAYOUT,
    ARTICLE_PAGE_LAYOUT,
    ARTICLE_NORMAL_LAYOUT,
    ARTICLE_NONE_LAYOUT,
    ARTICLE_LONG_LAYOUT,
} from './index';

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

const definedDynamicPageLayout: Record<string, any> = {
    'Default': BASE_LAYOUT,
    [layouts.FULL_PAGE]: BASE_LAYOUT,
    [layouts.CENTER_PAGE]: BASE_LAYOUT,
    [layouts.BACKGROUND_PAGE]: BASE_LAYOUT,

    'ARTICLE_SHORT': ARTICLE_SHORT_LAYOUT,
    'ARTICLE_PAGE': ARTICLE_PAGE_LAYOUT,
    'ARTICLE_NORMAL': ARTICLE_NORMAL_LAYOUT,
    'ARTICLE_NONE': ARTICLE_NONE_LAYOUT,
    'ARTICLE_LONG': ARTICLE_LONG_LAYOUT,
}

const getCurrentLayout = computed(() => _props.settings && _props.settings.layout);

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

<template>
    <component :is="definedDynamicPageLayout[getCurrentLayout] || null" v-bind="GET_PROPS()">
        <slot />
    </component>
</template>
