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

const _props = defineProps<{
  settings?: any;
  layout?: string;
  content?: any;

  section: any;
}>();

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

const getCurrentSection = computed(() => _props?.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,
    }"
  >
    <slot />
  </component>
</template>
