<script setup lang="ts">
import {computed, onBeforeMount, ref} from 'vue';
import Button from 'primevue/button';
import Panel from 'primevue/panel';
import Sticker from "@/components/Sticker.vue";
import { useRoute } from 'vue-router';
import { useUserStore } from "@/stores/userStore";
import { useStickerStore } from "@/stores/stickerStore";

const stickerStore = useStickerStore();
const userStore = useUserStore();

const route = useRoute();
const uuid = ref<string>(route.params.uuid as string);
// const uuid = ref(route.params.uuid);
console.log('uuid', uuid.value);

onBeforeMount(async () => {
  await stickerStore.fetch(uuid.value);
});

const first = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[0], parts[1], parts[2]].join('-');
})
const second = computed(() => {
  const parts = uuid.value.split('-')
  return [parts[3], parts[4]].join('-');
})

</script>

<template>
  <div class="profilePage">
    <Panel>
      <div class="flex flex-row content-end">
        <div>
          <div class="font-mono text-sn tracking-wider col">
            {{ first }}
          </div>
          <div class="font-mono text-sn tracking-wider col">
            {{ second }}
          </div>
        </div>
      </div>
    </Panel>
    <Panel header="Sticker">
      <div class="flex flex-col gap-5">
        <div id="StickerWrapper">
          <Sticker
            :color="stickerStore.sticker.backgroundColor"
            :layout="stickerStore.sticker.layout"
            :message1="stickerStore.sticker.message1"
            message2="message2"
            message3="message3"
            message4="message4"
            v-if="stickerStore.sticker"
          />
        </div>
        <Button
          v-bind:disabled="userStore.isAnonymous"
        >
          This is my sticker!
        </Button>
        <span v-if="userStore.isAnonymous">
            Log in to claim your sticker.
          </span>
      </div>
    </Panel>
  </div>
</template>
