<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 } from "@/utils/lodash";
import { enumPageComponentTemplates } from "@/definitions/enum";
const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
const _props = defineProps<{
  dataResult?: any;
  dataQuery?: string;
  layout?: string;
  label?: string;
  content?: any;
}>();

const SETTING_OPTIONS = {
  MAX_ELEMENT: 6,
  TEMPLATE: "TYPE:Card",
  LAYOUT: "TYPE:Card_MissHightLight",
};

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

const LAYOUT_PARSE = computed(() => {
  // console.log(_props.label);
  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;
});

async function dropData(data: any) {
  if (data) {
    const { dataResult, dataType } = data;
    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);

    emit("dropData", {
      dataResult: result,
      dataType,
      dataQuery: getDataQuery,
    });
  }
}

const selectComponent = () => {
  emit("selectComponent");
};

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

<template>
  <section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
    <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
      <DynamicComponent
        class="abc"
        :settings="{
          template: SETTING_OPTIONS.TEMPLATE,
          layout: SETTING_OPTIONS.LAYOUT,
          label: { ...mapActivesToItems(Number(index)) },
          dataResult: !isEmpty(component) ? { ...component } : null,
        }"
        :component="COMPONENT"
        @drop-data="dropData"
      />
    </div>
  </section>
  <!-- <conllection
    class="collection-container border-custom overflow-hidden"
    :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"
      :class="[index === 0 || index === 1 ? 'row-span-3' : index === 2 || index === 3 ? 'row-span-2' : 'row-span-1']"
      :settings="{
        template: SETTING_OPTIONS.TEMPLATE,
        layout: SETTING_OPTIONS.LAYOUT,
        label: { ...mapActivesToItems(Number(index)) },
        dataResult: !isEmpty(component) ? { ...component } : null,
      }"
      :component="COMPONENT"
      @drop-data="dropData"
    />
  </conllection> -->
  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display: none"></div>
</template>

<style lang="scss" scoped>
.gallery {
  column-count: 4;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  gap: 16px;

  @media (min-width: 640px) and (max-width: 1024px) {
    column-count: 2;
    -webkit-column-count: 2;
    -moz-column-count: 2;
  }

  @media (max-width: 640px) {
    column-count: 1;
    -webkit-column-count: 1;
    -moz-column-count: 1;
  }

  .wrap {
    position: relative;
    width: 100%;
    &:nth-child(1),
    &:nth-child(2) {
      padding-top: 615px;
    }
    &:nth-child(3),
    &:nth-child(5) {
      padding-top: 358px;
    }

    &:nth-child(4),
    &:nth-child(6) {
      margin-top: 16px;
      padding-top: 241px;
    }

    & > .abc {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      padding-bottom: 30px;
      // margin: 10px 0;
    }
  }
  .row-span-3 {
    // grid-row: span 3 / span 3;
    // height: 585px;

    // margin: 10px 0;
    // &:nth-child(1) {
    //   background-color: red;
    // }
    // &:nth-child(2) {
    //   background-color: yellow;
    // }
  }
  .row-span-2 {
    // margin: 10px 0;
    // grid-row: span 2 / span 2;
    // height: 328px;
    // background-color: aqua;
    // .basic-article {
    // }
  }
  .row-span-1 {
    // grid-row: span 1 / span 1;
    // height: 211px;
    // background-color: green;

    // .basic-article {
    // }
  }
}

.image img {
  height: auto;
  width: 100%;
}
.collection-container {
  // display: grid;
  // grid-template-columns: repeat(4, 1fr);
  // grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  column-count: 4;
}
</style>
