<template>
  <div :class="['grid', selectedSet ? 'grid-cols-4' : 'grid-cols-3']">
    <div class="flex flex-col">
      <button
        v-for="room of rooms"
        @click="emit('selectRoom', room)"
        :class="[
          selectedRoom?.id === room.id
            ? 'bg-blue-100 hover:bg-blue-200'
            : 'hover:bg-blue-100',
          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
        ]"
      >
        <span>{{ room.displayName }}</span> <ChevronRightIcon class="h-4 w-4" />
      </button>
    </div>

    <div class="flex flex-col" v-if="selectedRoom?.id">
      <button
        v-for="storage of storages"
        @click="emit('selectStorage', storage)"
        :class="[
          selectedSet?.id === storage.id || selectedStorage?.id === storage.id
            ? 'bg-blue-100 hover:bg-blue-200'
            : 'hover:bg-blue-100',
          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
        ]"
      >
        <span
          >{{ storage.displayName }}

          <span v-if="!isSet(storage)"
            >({{ (storage as StorageListItem).itemCount }})</span
          >
          <span v-else>
            (set) ({{ (storage as StorageSetListItem).storages.length }})</span
          >
        </span>
        <ChevronRightIcon class="h-4 w-4" />
      </button>
    </div>

    <div class="flex flex-col" v-if="selectedSet">
      <button
        v-for="storage of selectedSet.storages"
        @click="emit('selectStorage', storage)"
        :class="[
          'hover:bg-blue-100',
          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
        ]"
      >
        <span>{{ storage.displayName }} ({{ storage.itemCount }})</span>
        <ChevronRightIcon class="h-4 w-4" />
      </button>
    </div>

    <div class="flex flex-col" v-if="selectedStorage?.items">
      <button
        v-for="item of selectedStorage.items"
        :class="[
          'hover:bg-blue-100',
          'flex items-center justify-between border-b-2 border-gray-100 py-2 px-2',
        ]"
      >
        <span>{{ item.item.displayName }}</span>
        <ChevronRightIcon class="h-4 w-4" />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ChevronRightIcon } from '@heroicons/vue/24/outline';
import isSet from '../../../utils/is-storage-set';
import {
  StorageListItem,
  StorageSetListItem,
  StorageSharedType,
} from '../../../interfaces/storage.interfaces';
import { RoomLayoutObject } from '../../../interfaces/room.interfaces';

const props = defineProps<{
  rooms: RoomLayoutObject[];
  storages: StorageSharedType[];
  selectedRoom?: RoomLayoutObject;
  selectedSet?: StorageSetListItem;
  selectedStorage?: StorageListItem;
}>();

const emit = defineEmits<{
  (e: 'selectStorage', storage: StorageSharedType): void;
  (e: 'selectRoom', room: RoomLayoutObject): void;
}>();
</script>
