<script setup lang="ts">
import { useMediaQuery } from '@vueuse/core'

interface Item {
  title: string
  link: string
}

interface Props {
  label: string
  link: string
  content: Item[]
}

const props = defineProps<Props>()

const isDesktop = useMediaQuery('(max-width: 1024px)')

const { t } = useI18n()

const open = ref(false)
function toFinalValues(el: HTMLDivElement) {
  el.style.height = el.scrollHeight + 'px'
  el.style.opacity = '1'
}

function onAfterEnter(el: HTMLDivElement) {
  el.style.height = ''
}

const filterCheck = computed(() => {
  if (open.value) {
    return open.value
  }
  else {
    return open.value = !isDesktop.value
  }
})
</script>

<template>
  <div class="flex flex-col gap-2 items-start">
    <div class="flex gap-2 justify-between w-full">
      <nuxt-link
        class="text-sm font-semibold lg:pb-3 lg:pr-4 lg:border-b-[0.5px] lg:border-white cursor-default"
        :class="{ 'cursor-pointer': link }"
        :to="link?.replace(/\/$/, '')"
      >
        {{ t(label) }}
      </nuxt-link>

      <div class="transition-all lg:hidden cursor-pointer">
        <a-icon-chevron-down
          v-if="content.length"
          filled
          :font-controlled="false"
          class="size-6 transition-all"
          :class="{ 'rotate-180': open }"
          @click="open = !open"
        />
      </div>
    </div>

    <transition
      name="accordion"
      @enter="toFinalValues"
      @after-enter="onAfterEnter"
      @before-leave="toFinalValues"
    >
      <div
        v-if="filterCheck"
        class="flex gap-3 lg:gap-6 flex-col lg:flex-row"
      >
        <div
          v-for="(subItem, subIdx) in content"
          :key="subIdx"
          class="flex flex-col gap-3 lg:gap-2"
        >
          <div
            v-for="(link, idx) in subItem"
            :key="idx"
            class="flex gap-2 items-center"
          >
            <nuxt-link
              class="text-xs lg:font-medium flex gap-2 items-center cursor-pointer"
              :to="link.link?.replace(/\/$/, '')"
            >
              {{ t(link.title) }}
            </nuxt-link>

            <div
              v-if="link.isNew"
              class="text-[9px] font-bold px-1 py-[2px] rounded-sm bg-white/20"
            >
              NEW
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style scoped>
.accordion-enter-active,
.accordion-leave-active {
  overflow: hidden;
  transition: height 0.3s ease,
  opacity 0.3s ease,
  margin 0.3s ease;

}

.accordion-enter-from,
.accordion-leave-to {
  height: 0 !important;
  opacity: 0 !important;
  margin: 0 !important;
}
</style>
