<script setup lang="ts">
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
import { isEmpty, groupBy } from "lodash";
import { enumPageComponentTemplates } from "@/definitions/enum";

const _props = defineProps<{
  dataResult?: any[];
  dataQuery?: string;
  layout?: string;
  label?: string;
  content?: any;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 5,
  TEMPLATE: "TYPE:Card",
  LAYOUT: "TYPE:Card_Audio",
};

const COMPONENT = {
  taxonomy: enumPageComponentTemplates.ARTICLE,
};

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

const _dataResult = computed(() => {
  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
  const result = getInputValue(_props.dataResult, "ARRAY");
  result &&
    result.length > 0 &&
    _components.map((_: any, index: any) => {
      _components[index] = result[index] || null;
    });
  return _components;
});

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

<template>
  <div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
    <DynamicComponent
      v-for="(component, index) in _dataResult"
      :key="index"
      :settings="{
        template: SETTING_OPTIONS.TEMPLATE,
        layout: SETTING_OPTIONS.LAYOUT,
        label: mapActivesToItems(Number(index)),
        dataResult: !isEmpty(component) ? { ...component } : null,
      }"
      :component="COMPONENT"
      @drop-data="dropData"
    />
  </div>
  <div v-html="LAYOUT_PARSE.styleClasses"></div>
</template>

<style lang="scss" scoped>
.collection-container {
  display: grid;
  &.column {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  &.row {
    grid-template-rows: auto;
    grid-auto-flow: column;
  }
  &.border-pri {
    gap: 5px;
  }
  &.border-custom {
    border-color: #e5e5e5 !important;
  }
  .empty {
    min-height: 100px;
    border-radius: 6px;
    background: #409eff;
  }
  &.noData {
    border-radius: 6px;
  }
}
</style>
