<template>
  <teleport to="body">
    <div
      v-if="categories.length > 0"
      class="categories-dropdown"
      :style="{ left: offsetLeft }"
      @mouseleave="emit('hide')"
      @blur="emit('hide')"
    >
      <ul class="category-list">
        <li 
          v-if="categoryId === undefined" 
          class="category-item"
        >
          <a
            :href="getCategoryLink('/products')"
            class="category-link"
          >
            <span>View all</span>
          </a>
        </li>
        <li
          v-for="category in categories"
          :key="category.id"
          class="category-item"
        >
          <a
            :href="getCategoryLink(category.urlPath)"
            class="category-link"
          >
            <span>{{ category.name }}</span>
            <span v-if="category.hasChildren" class="arrow">▶</span>
          </a>
          <ul v-if="category.hasChildren" class="subcategory-list">
            <li
              v-for="child in category.children"
              :key="child.id"
              class="subcategory-item"
            >
              <a
                :href="getCategoryLink(child.urlPath)"
                class="subcategory-link"
              >
                {{ child.name }}
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useVueBaseProps } from '@lightspeed/crane';
import { Design } from '../type.ts';

interface Props {
  element?: HTMLElement;
  categoryId?: number;
}

const props = defineProps<Props>();
const emit = defineEmits(['hide']);

const baseProps = useVueBaseProps<Props, Design>();

const isPreviewMode = computed(() => Boolean(baseProps.site?.value?.isPreviewMode));
const categoryTree = computed(() => baseProps.category?.value?.categoryTree ?? []);
const categories = computed(() => categoryTree.value
  .filter(filterUniqueCategories)
  .filter((category) => filterByCategoryId(category, props.categoryId))
  .map((category) => ({
    ...category,
    hasChildren: category.children?.length > 0,
  }))
);
const offsetLeft = computed(() => `${props.element?.offsetLeft ?? 0}px`);

function filterUniqueCategories(category: CategoryTree, index: number, categoryTree: CategoryTree[]) {
  return categoryTree.findIndex((c) => c.id === category.id) === index;
}

function filterByCategoryId(category: CategoryTree, categoryId?: number) {
  if (categoryId !== undefined) {
    return category.id === categoryId;
  }
  return true;
}

const getCategoryLink = (urlPath: string) => {
  if (isPreviewMode.value) {
    return undefined;
  }
  return urlPath;
};
</script>

<style scoped lang="scss">
.categories-dropdown {
  position: absolute;
  top: 48px;
  left: 12px;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 200px;
  padding: 8px;
  z-index: 1000;
}

.category-list,
.subcategory-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.category-item,
.subcategory-item {
  cursor: pointer;
  position: relative;
  margin: 0;
  padding: 6px 10px;
}

.category-link,
.subcategory-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #080d12;
  text-decoration: none;
  width: 100%;
  transition: color 0.35s ease;

  &:hover {
    color: #0056b3;
  }
}

.arrow {
  margin-left: 8px;
  font-size: 10px;
  color: #b7b7b7;
}

.subcategory-list {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 200px;
  padding: 8px;
  z-index: 1001;
}

.category-item:hover > .subcategory-list {
  display: block;
}
</style>
