<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" :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>
          <h3 :style="mapActivesToItems(index)['h3.categories']">
            <nuxt-link :to="`${component.code}`">{{ component.title }}</nuxt-link>
          </h3>
        </div>
        <div v-html="designObject.styleClasses"></div>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border-pri {
  .categories-container {
    padding: 0;
  }
}
.categories-container {
  display: flex;
  gap: 10px;
  flex-direction: row;
  align-items: flex-end;
  width: fit-content;
  overflow: hidden;
  padding: 20px;

  .category {
    height: 100%;

    h3 {
      font-weight: 500;
      font-size: 13px;
      margin: 0px !important;
    }

    &:first-child {
      h3 {
        font-weight: 600;
        font-size: 17px;
      }
    }
  }

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

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