<template>
  <div class="flex h-full w-full relative">
    <div class="w-2/12 flex flex-col relative overflow-auto">
      <!-- Asset Categories -->
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
        <span :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
        <span :class="{ 'text-white': selectedCategory === 'objects' }">Objects</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
        <span :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Items</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></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-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
        <span :class="{ 'text-white': selectedCategory === 'shops' }">Shops</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
        <span :class="{ 'text-white': selectedCategory === 'characterTypes' }">Character types</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
        <span :class="{ 'text-white': selectedCategory === 'characterHair' }">Character hair</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Mounts</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Pets</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
      <a class="relative p-2.5 hover:cursor-pointer">
        <span>Emoticons</span>
        <div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
      </a>
    </div>
    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>

    <!-- Assets list -->
    <div class="overflow-auto h-full w-4/12 flex flex-col relative">
      <TileList v-if="selectedCategory === 'tiles'" />
      <ObjectList v-if="selectedCategory === 'objects'" />
      <SpriteList v-if="selectedCategory === 'sprites'" />
      <CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
      <CharacterHairList v-if="selectedCategory === 'characterHair'" />
    </div>

    <div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>

    <!-- Asset details -->
    <div class="flex w-1/2 after:hidden flex-col relative overflow-auto">
      <TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
      <ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
      <SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
      <CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
      <CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import TileList from '@/components/gameMaster/assetManager/partials/tile/TileList.vue'
import TileDetails from '@/components/gameMaster/assetManager/partials/tile/TileDetails.vue'
import ObjectList from '@/components/gameMaster/assetManager/partials/object/ObjectList.vue'
import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'

const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles')
</script>
