<template>
  <div>
    <PageHead bordered>
      <h2 class="text-2xl font-bold">{{ storage.displayName }}</h2>

      <Menu
        title="Actions"
        class="self-end"
        :options="[
          {
            title: 'Add new item',
            onClick: addNewItem,
          },
        ]"
      />
    </PageHead>

    <span class="text-xl font-bold text-gray-400" v-if="!storage.items?.length"
      >No items in storage.</span
    >
    <div class="grid gap-2 md:grid-cols-2" v-else>
      <StoredItemCard
        v-for="stored of storage.items || []"
        class="rounded-md bg-white px-2 py-2 shadow-md ring-1 ring-black ring-opacity-5"
        size="lg"
        :stored-item="stored"
      >
        <template #actions>
          <Menu
            title=""
            button-class="px-0.5 py-0.5"
            :options="[
              { title: 'Change details' },
              { title: 'Add transaction' },
              { title: 'Move' },
            ]"
          >
            <EllipsisVerticalIcon class="h-5 w-5" />
          </Menu>
        </template>
      </StoredItemCard>
    </div>

    <NewItemModal ref="newItem" @added="newStoredItemAdded" />
  </div>
</template>

<script setup lang="ts">
import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline';
import { ref } from 'vue';
import NewItemModal from '../../../../components/item/NewItemModal.vue';
import StoredItemCard from '../../../../components/item/StoredItemCard.vue';
import Menu from '../../../../components/menu/Menu.vue';
import PageHead from '../../../../components/PageHead.vue';
import { BuildingListItem } from '../../../../interfaces/building.interfaces';
import {
  StorageListItem,
  StoredItem,
} from '../../../../interfaces/storage.interfaces';

const newItem = ref<InstanceType<typeof NewItemModal>>();
const props = defineProps<{
  storage: StorageListItem;
  building: BuildingListItem;
}>();

const emit = defineEmits<{
  (e: 'storageAdded', item: StoredItem): void;
}>();

const newStoredItemAdded = (item: StoredItem) => {
  emit('storageAdded', item);
};

const addNewItem = () => {
  newItem.value?.openModal(props.building, props.storage);
};

defineExpose({
  addNewItem,
});
</script>
