<script setup>
import TEMPLATES from "../templates";
import v2Image from "../assets/v2.png";

import VueSelect from "vue-select";
import { RouterLink } from "vue-router";
</script>

<script>
export default {
  components: { VueSelect },
  props: ["defaultTemplate", "sideText"],
  data() {
    return {
      currentTemplate: this.defaultTemplate,
      sideText: this.sideText,
    };
  },
  watch: {
    currentTemplate(value) {
      console.info("Switching template: ", value);
      this.$router.push(value.path);
    },
  },
};
</script>

<template>
  <nav class="bg-grey-600 py-7">
    <div
      class="container container--default flex justify-between flex-col lg:flex-row"
    >
      <div class="mb-5 flex items-center lg:pr-8 lg:mb-0">
        <RouterLink to="/">
          <img
            src="https://styleguide.pirati.cz/2.12.x/images/logo-round-white.svg"
            class="w-8"
          />
        </RouterLink>
        <RouterLink
          to="/"
          class="text-white pl-4 font-bold text-xl hover:no-underline lg:border-r lg:border-grey-300 lg:pr-8 flex gap-2 items-center"
        >
          Generátor grafiky
          <img :src="v2Image" class="h-5" alt="Verze 2.0" />
        </RouterLink>

        <div
          v-if="sideText"
          class="pl-8 text-white"
        >
          {{ sideText }}
        </div>
      </div>
      <div>
        <div class="w-72" v-if="currentTemplate">
          <VueSelect
            class="bg-white rounded-md"
            :options="Object.values(TEMPLATES)"
            :clearable="false"
            :searchable="false"
            label="name"
            v-model="currentTemplate"
          >
            <!-- BEGIN Hide search (TODO) -->
            <template v-slot:search="{ attributes, events }">
              <input class="h-0 w-0" v-bind="attributes" v-on="events" />
            </template>
            <!-- END Hide search -->

            <template v-slot:option="option">
              <div class="flex gap-2 items-center">
                <div class="w-12 h-12 flex justify-end shrink-0">
                  <img
                    class="h-12 mx-auto"
                    alt="Náhled šablony"
                    :src="option.image"
                  />
                </div>
                <div class="overflow-x-hidden break-normal whitespace-normal">
                  {{ option.name }}
                </div>
              </div>
            </template>
          </VueSelect>
        </div>
      </div>
    </div>
  </nav>
</template>
