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

      <template v-if="selectedRoom?.id">
        <div class="my-2 flex justify-center md:hidden">
          <ChevronDoubleDownIcon class="h-6 w-6" />
        </div>

        <div class="flex flex-col">
          <div
            class="border-b-4 border-gray-300 bg-gray-100 px-2 py-2 text-center font-bold"
          >
            Select Storage / Set
          </div>
          <button
            v-for="storage of storages"
            @click="emit('selectStorage', storage)"
            :aria-expanded="isStorageOrSetSelected(storage)"
            :class="[
              isStorageOrSetSelected(storage)
                ? 'bg-blue-100 hover:bg-blue-200'
                : 'hover:bg-blue-100',
              'flex items-center justify-between border-b-1 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 class="mx-auto flex space-x-2 py-2">
            <button
              @click="emit('newStorage', false)"
              class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
            >
              <PlusIcon class="h-4 w-4" /> <span>Add Storage</span>
            </button>
            <span>·</span>
            <button
              @click="emit('newStorage', true)"
              class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
            >
              <PlusIcon class="h-4 w-4" /> <span>Add Storage Set</span>
            </button>
          </div>
        </div>
      </template>

      <template v-if="selectedSet">
        <div class="my-2 flex justify-center md:hidden">
          <ChevronDoubleDownIcon class="h-6 w-6" />
        </div>

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

          <div class="mx-auto flex space-x-2 py-2">
            <button
              @click="emit('newStorage', selectedSet!)"
              class="flex items-center space-x-1 text-blue-500 hover:text-blue-600 hover:underline"
            >
              <PlusIcon class="h-4 w-4" /> <span>Add Storage</span>
            </button>
          </div>
        </div>
      </template>
    </div>

    <div class="my-2 mb-4 flex justify-center" v-if="selectedStorage">
      <ChevronDoubleDownIcon class="h-6 w-6" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ChevronDoubleDownIcon,
  ChevronRightIcon,
  PlusIcon,
} 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,
    parentSet?: StorageSetListItem
  ): void;
  (e: 'selectRoom', room: RoomLayoutObject): void;
  (e: 'newStorage', set: boolean | StorageSetListItem): void;
  (e: 'addItem', storage: StorageListItem): void;
}>();

const isStorageOrSetSelected = (storage: StorageSharedType) =>
  (isSet(storage) && props.selectedSet?.id === storage.id) ||
  (props.selectedStorage?.id === storage.id && !isSet(storage));

const isStorageSelected = (storage: StorageSharedType) =>
  props.selectedStorage?.id === storage.id && !isSet(storage);
</script>
