<script setup lang="ts">
import { getInputValue } from "@/utils/parseSQL";
import { enumPageLayouts, enumPageTemplate, enumPageKey } from "@/definitions/enum";

const props = defineProps<{
    layout?: any,
    label?:any
}>()

const CLASS_FOR_LAYOUT = computed(() => {
  let _classForLayout = {};
  switch (props.layout) {
    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['DEFAULT']:
      _classForLayout = {
        page_container: "page_container full-size-page",
        layout_container: "layout_container center-layout",
      };
      break;
    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['FULL']:
      _classForLayout = {
        page_container: "page_container full-size-page",
        layout_container: "layout_container full-size-layout",
      };
      break;
    case enumPageLayouts[enumPageTemplate[enumPageKey.HOME]['DEFAULT']]['BACKGROUND_PAGE']:
      _classForLayout = {
        page_container: "page_container full-size-page background-container",
        layout_container: "layout_container center-layout",
      };
      break;
    default:
      _classForLayout = {
        page_container: "page_container",
        layout_container: "layout_container",
      };
      break;
  }
  return _classForLayout;
});
</script>

<template>
    <div :class="[CLASS_FOR_LAYOUT.page_container]">
        <div :class="[CLASS_FOR_LAYOUT.layout_container]" class="grid-container">
            <slot />
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .page_container {
        // padding: 20px 0;
        &.full-size-page {
            width: 100%;
        }
        // .full-size-layout {
        //     padding-left: 20px;
        //     padding-right: 20px;
        // }
    }

    .layout_container {
        padding-top: 20px;

        &.center-layout {
            max-width: 1440px;
            padding: 0 27.5px;
            margin: auto;
        }
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
</style>
