<template>
  <div class="flex h-full w-full relative">
    <div class="w-[15%] flex flex-col relative">
      <!-- Asset Categories -->
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
        <span>Tiles</span>
        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
        <span>Objects</span>
        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Loot</span>
        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>NPC's</span>
        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
      </a>
    </div>
    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>

    <!-- Assets list -->
    <div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
      <TileList v-if="selectedCategory === 'tiles'" />
      <ObjectList v-if="selectedCategory === 'objects'" />
    </div>

    <button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
      <img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
    </button>
    <div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>

    <!-- Asset details -->
    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
      <TileDetails :tile="selectedTile" v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
      <ObjectDetails :object="selectedTile" v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useGameStore } from '@/stores/game'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
import TileDetails from '@/components/utilities/assetManager/partials/TileDetails.vue'
import ObjectList from '@/components/utilities/assetManager/partials/ObjectList.vue'
import ObjectDetails from '@/components/utilities/assetManager/partials/ObjectDetails.vue'
import { useAssetManagerStore } from '@/stores/assetManager'

const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles')

const selectedTile = ref('')
const selectedObject = ref('')

const hasScrolled = ref(false)
const elementToScroll = ref()

const onScroll = (e: Event) => {
  let scrollTop = (e.target as HTMLBodyElement).scrollTop

  if (scrollTop > 200) {
    hasScrolled.value = true
  } else if (scrollTop <= 200) {
    hasScrolled.value = false
  }
}

function toTop() {
  elementToScroll.value.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  })
}
</script>
