<script setup lang="ts">
import { isEmpty } from "@/utils/lodash";
import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";

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

const SETTING_OPTIONS = {
  MAX_ELEMENT: 3,
};

const _dataResult = computed(() => {
  const designObject = _props.label ? getInputValue(_props.label, "OBJECT") : {};
  let _components = Array(Number(designObject.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 Object.assign({}, _components);
});

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

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

<template>
  <div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
    <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
      <template v-if="!isEmpty(component)">
        <div class="category-content">
          <svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.984 2.456V4.184H4.336V5.992H2.4V4.184H0.752V2.456H2.4V0.648H4.336V2.456H5.984Z" fill="black" />
          </svg>

          <h3 :style="mapActivesToItems(index)['h3.categories']" class="whitespace-nowrap">
             <nuxt-link :to="`/${component.code}`">{{ component.title }}</nuxt-link>
          </h3>
        </div>
        <div v-if="designObject.styleClasses" v-html="designObject.styleClasses"></div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border-pri {
  .categories-container {
    padding: 0;
  }
}
.categories-container {
  display: flex;
  flex-direction: column;
  width: fit-content;
  overflow: hidden;
  padding: 16px;

  .category {
    &-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    h3 {
      color: #000;
      font-weight: 400;
      line-height: 180%;
      font-size: 14px;
      margin: 0px !important;
    }
  }

  .empty {
    border-radius: 6px;
    background: #409eff;
    width: 100px;

    > div {
      min-height: 20px;
    }
  }
}
.border-custom {
  border-color: #e5e5e5 !important;
}
</style>
