<script setup lang="ts">
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
import { getInputValue } from "@/utils/parseSQL";
import { enumPageSectionLayouts, enumPageSectionTemplate, enumPageSectionKey } from "~/definitions/enum";
import type { PageSection } from "@/server/models/dynamic-page/index";

const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);

const props = defineProps<{
  layout?: string;
  content?: any;
  settings: any;
  section: PageSection;
}>();

const defineTypeRecusive = {
  COMPONENT: "component",
  SECTION: "section",
};

const SETTING_OPTIONS = computed(() => {
  let _setting_options = {
    MAX_ELEMENT: 1,
  };
  return _setting_options;
});

const designObject = computed(() => {
  // không truyền lable là chữ lên sẽ lỗi
  return props?.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});

const CLASS_FOR_SECTION = computed(() => {
  let _classForSection = {
    section_layout: "section_layout basic_column",
  };
  return _classForSection;
});


const handleActiveItem = (key: string, keyActive: string, index: number, defaultValue: any) => {
  const designObject = props?.section?.settings?.label ? getInputValue(props.section.settings.label, "OBJECT") : {};
  const updatedDesignObject = { ...designObject };

  if (Array.isArray(designObject[keyActive])) {
    const isActive = designObject[keyActive].includes(Number(index) + 1);
    return {
      ...updatedDesignObject,
      [key]: isActive ? designObject[key] : defaultValue,
    };
  }

  delete updatedDesignObject[key];
  return updatedDesignObject;
};

const LAYOUT_PARSE = computed(() => {
  return props.settings?.label ? getInputValue(props.settings.label, "OBJECT") : {};
});

const mapActivesToItems = (index: number) => {
  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
    return LAYOUT_PARSE.value.listCss[index] || {};
  }
  return {};
};
</script>

<template>
  <div 
    class="section_layout border-custom" 
    :class="[CLASS_FOR_SECTION.section_layout]" 
    :style="LAYOUT_PARSE['div.section_layout']"
  >
    <div
      class="section_child"
      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
      :key="index"
      :class="['border-custom', CLASS_FOR_SECTION[index]]"
      :style="mapActivesToItems(index)['div.section_child']"
    >
      <RecusiveSection :type="position.type" :id="position.data" :section="props.section" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border-pri {
  &.section_layout {
    gap: 5px;
  }
}
.section_layout {
  display: grid;

  &.smartphone_layout {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  }
  &.basic_column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  &.two_col_layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  &.three_col_layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  &.four_col_layout {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  &.five_col_layout {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  &.six_col_layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-span-3 {
    grid-column: span 3 / span 3;
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-span-5 {
    grid-column: span 5 / span 5;
  }
  .border-custom {
    border-color: #e5e5e5 !important;
  }
}
</style>
