<template>
  <div class="bg-dark-600 rounded-lg flex overflow-hidden">
    <div class="flex-grow flex items-center justify-center gap-2 px-3 py-4">
      <template v-if="item.interaction.type === 'use'">
        <HandPointingIcon class="text-4xl mb-6"/>
        <div class="flex flex-col items-center gap-2">
          <ObjectPicture :object-id="item.interaction.objectId"/>
          <div class="text-sm text-gray-200 text-center">
            {{ game.allObjectsById.get(item.interaction.objectId)!.label }}
          </div>
        </div>
      </template>
      <template v-else v-for="(objectId, index) in item.interaction.objectIds" :key="objectId">
        <div class="flex flex-col items-center gap-2">
          <ObjectPicture :object-id="objectId"/>
          <div class="text-sm text-gray-200 text-center">
            {{ game.allObjectsById.get(objectId)!.label }}
          </div>
        </div>
        <PlusIcon v-if="index < item.interaction.objectIds.size - 1" class="text-3xl mb-6"/>
      </template>
    </div>
    <div class="flex flex-col justify-between items-center bg-gray-800 w-17">
      <div class="flex flex-col justify-center items-center pt-3 pb-2">
        <div class="text-2xl">{{ item.votes }}</div>
        <div class="text-sm text-center">
          Vote{{item.votes === 1 ? "" : "s" }}
        </div>
      </div>
      <button
          v-if="mode === 'audience'"
          class="align-end py-2 w-full"
          :class="game.currentInteractionId === item.id ? 'bg-blue-500' : 'bg-gray-700'"
          @click="toggleVote()"
      >
        +1
      </button>
      <button
          v-if="mode === 'director' && (item.interaction.type !== 'combine' || findMatchingCombination(game.currentRoom.combinations, item.interaction.objectIds))"
          class="align-end py-1 w-full bg-green-800"
          @click="game.activateInteractionQueueItem(item.id)"
      >
        <CheckIcon class="relative top-2px"/>
      </button>
      <button
          v-if="mode === 'director'"
          class="align-end py-1 w-full bg-red-900"
          @click="game.removeInteractionQueueItem(item.id)"
      >
        <TrashIcon class="relative top-2px"/>
      </button>
    </div>
  </div>
</template>

<style module lang="scss">

</style>

<script setup lang="ts">
  import PlusIcon from "virtual:icons/ph/plus-bold"
  import TrashIcon from "virtual:icons/ph/trash-bold"
  import CheckIcon from "virtual:icons/ph/check-bold"
  import HandPointingIcon from "virtual:icons/ph/hand-pointing-duotone"
  import type { InteractionQueueItem } from "../../shared/script/types"
  import ObjectPicture from "./ObjectPicture.vue"
  import { useGame } from "../game"
  import { findMatchingCombination } from "../../shared/util"

  const props = defineProps<{
    item: InteractionQueueItem
    mode: "audience" | "director"
  }>()

  const game = useGame()

  function toggleVote() {
    if (game.currentInteractionId === props.item.id) {
      game.revokeCurrentInteractionVote()
    } else {
      game.voteForInteraction(props.item.interaction)
    }
  }
</script>