<template>
  <div class="p-6 h-full w-full overflow-auto flex flex-col items-center">
    <div v-if="game" class="space-y-4 flex flex-col items-center w-full max-w-400">
      <img v-if="game.logo_path" :src="game.logo_path" :alt="game.title" class="h-72"/>
      <h1 v-else class="text-4xl font-bold">{{ game.title }}</h1>

      <!--      Actual carousel pls -->
      <!--      <div class="flex">-->
      <!--        <LocalImage-->
      <!--            v-for="(img, index) in game.media_paths"-->
      <!--            :key="index"-->
      <!--            :src="img"-->
      <!--            :alt="img"-->
      <!--            :gameId="game.id"-->
      <!--            class="rounded-lg border border-gray-600 max-h-48 object-cover"-->
      <!--        />-->
      <!--      </div>-->

      <div class="flex justify-between w-full space-y-1">
        <ImageCarousel :gameId="game.id"
                       :links="game.media_paths"
                       class="basis-1/4"
        />
<!--        <LocalImage-->
<!--            v-for="(img, index) in [game.media_paths[0]]"-->
<!--            :key="index"-->
<!--            :src="img"-->
<!--            :alt="img"-->
<!--            :gameId="game.id"-->
<!--            class="rounded-lg border border-gray-600 max-h-48 object-cover basis-1/4"/>-->

        <div class="flex flex-col basis-1/4">
          <div class="text-md text-white">Players: {{ game.players }}</div>
          <div class="text-md text-white">Genres: {{ game.genres }}</div>
          <div class="text-md text-white">Collections: {{ game.collections }}</div>
          <div class="text-md text-white">Updated: {{ game.modification }}</div>
          <div class="text-md text-white">Released: {{ game.release }}</div>
          <div class="text-md text-white">Version: {{ game.version }}</div>
        </div>
      </div>

      <div class="text-lg w-full wrap min-h-15">{{ game.description }}</div>


      <div class="space-y-2 w-full flex items-start">
        <div class="flex gap-2 mt-2">
          <button
              id="btn-play"
              key="play"
              :style="buttonStyle"
              @click="store.startSelectedGame()"
              class="bg-blue-600 px-6 py-2 rounded hover:bg-blue-500 rounded-full text-2xl"
          >
            Play
          </button>

          <div
              v-for="(link, name) in {
                Repo: game?.public_repository_link ?? undefined,
                Itch: game.itch_link
              }">
            <button
                v-if="link"
                :key="name"
                :style="buttonStyle"
                class="bg-blue-600 px-6 py-2 rounded hover:bg-blue-500 rounded-full text-2xl"
                @click="$emit('qr', link)"
            >
              {{ name }}
            </button>
          </div>
        </div>
      </div>

      <div class="flex w-full items-start">
        <div class="flex gap-3">
          <DevCard
              class="min-w-60"
              v-for="dev in game.developers"
              :dev="dev"
              @qr="(value) => $emit('qr', value)"
          />
        </div>
      </div>
    </div>

    <div v-else class="h-full flex flex-col items-center justify-center text-gray-500">
      <h1 class="text-3xl font-bold">No game selected</h1>
    </div>
  </div>
</template>

<script setup lang="ts">
import { models } from "../../wailsjs/go/models";
import Game = models.Game;
import LocalImage from "./LocalImage.vue";
import { computed } from "vue";
import DevCard from "./DevCard.vue";
import { useAppStore } from "../stores/app-store";
import ImageCarousel from "./ImageCarousel.vue";

const store = useAppStore();

const props = defineProps<{
  game: Game,
}>();

const buttonStyle = computed(() => {
  const ternary = props.game?.color_scheme?.ternary ?? "#ffffff";
  const secondary = props.game?.color_scheme?.primary ?? "#100a99";

  return {
    backgroundColor: secondary,
    textColor: ternary
  };
})

defineEmits(['qr']);
</script>

<style scoped>
img {
  transition: transform 0.2s;
}

img:hover {
  transform: scale(1.05);
}
</style>
