<template>
  <section
    class="MoodCurrent"
    @click="openMoodChoice"
  >
    <FontAwesomeIcon class="icon" :icon="currentMood.icon" />
    <div class="text">
      <h1>{{ currentMood.label }}</h1>
      <p v-if="currentNode">{{ currentNode }}</p>
    </div>
  </section>
  <MoodChoice
    ref="moodChoice"
    @change-mood="changeMood"
  />
</template>

<script setup lang="ts">
import { Mood, moods } from '../../shared/moods'
import { onMounted, ref, useTemplateRef } from 'vue'
import MoodChoice from '../Sections/Mood/Choice.vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { usePageStore } from '../../stores/page.ts'
import { useMoodStore} from '../../stores/mood.ts'

const moodStore = useMoodStore()
const currentMood = ref<Mood>(moods.happy)
const currentNode = ref<string>('')
const changeMood = (newMood : Mood, note ?: string) => {
  currentMood.value = newMood
  currentNode.value = note ?? ''
  document.documentElement.style.setProperty('--clr-current-dark', `var(--clr-${newMood.color}-dark)`)
  document.documentElement.style.setProperty('--clr-current-light', `var(--clr-${newMood.color}-light)`)

  moodStore.changeMood(newMood)
  moodStore.changeNote(note)
}

const moodChoice = useTemplateRef<InstanceType<typeof MoodChoice>>('moodChoice')
const openMoodChoice = () => { moodChoice.value?.$el.showModal() }

onMounted(() => {
  const pageStore = usePageStore()
  pageStore.changeName('Stimmung')
})
</script>

<style scoped>
.MoodCurrent {
  background: var(--clr-current-light);
  color: var(--clr-current-dark);
  padding: var(--padding-default);
  font-family: 'Roboto Condensed', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;

  & .icon { font-size: 14rem; }
  & h1 { font-size: 1.5rem; }
  & .text { text-align: center; }
}
</style>