<template>
  <dialog
      class="Dialog"
      ref="dialog"
      closedby="none"
  >
    <div class="wrapper" ref="wrapper">
      <header>
        Wie geht's dir gerade?
        <Button display="icon" color="neutral" @click="abort">
          <FontAwesomeIcon :icon="faTimes" />
        </Button>
      </header>
      <main class="pad">
        <div class="MoodChoice">
          <button
              v-for="[, mood] in availableMoods"
              :class="{
                active: currentMood?.id === mood.id,
              }"
              :key="mood.label"
              :style="{
                '--color': `var(--clr-${mood.id}-dark)`,
                '--background-active': `var(--clr-${mood.id}-light)`,
              }"
              @click="changeMood(mood)"
          >
            <FontAwesomeIcon class="icon" :icon="mood.icon" />
            <span>{{ mood.label }}</span>
          </button>
        </div>
      </main>
      <div class="pad">
        <span ref="note" class="note" role="textbox" contenteditable="true"></span>
      </div>
      <footer>
        <Button @click="abort" display="text" color="error">Abbrechen</Button>
        <Button @click="accept" :disabled="currentMood === null">Wählen</Button>
      </footer>
    </div>
  </dialog>
</template>

<script setup lang="ts">
import { type Mood, moods, type PossibleMood } from '../../shared/moods'
import { computed, onMounted, ref, useTemplateRef } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import Button from '@/Button.vue'
import { onClickOutside } from '@vueuse/core'
import { faTimes } from '@fortawesome/pro-duotone-svg-icons/faTimes'

type Emits = {
  (e: 'changeMood', mood : Mood, note ?: string): Mood
}

const availableMoods = computed<[PossibleMood, Mood][]>(() => Object.entries(moods) as [PossibleMood, Mood][])
const currentMood = ref<Mood | null>(null)

const emit = defineEmits<Emits>()
const changeMood = (newMood : Mood) => {
  currentMood.value = newMood
}

const abort = () => {
  dialog.value?.close()
  currentMood.value = null
  if (note.value) note.value.innerText = ''
}

const note = useTemplateRef<HTMLSpanElement>('note')

const accept = () => {
  if (!currentMood.value) return
  emit('changeMood', currentMood.value, note.value?.innerText)
  abort()
}

const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const wrapper = useTemplateRef<HTMLElement>('wrapper')

onMounted(() => { onClickOutside(wrapper, () => dialog.value?.close()) })
</script>

<style scoped>
.MoodChoice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 4rem;
  gap: var(--padding-default);

  & > button {
    all: unset;
    --background-active: var(--clr-white);
    --background: var(--clr-white);
    --color: var(--clr-empty-dark);

    font-family: 'Roboto Condensed', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--background);
    color: var(--color);
    gap: var(--padding-xxs);

    &.active {
      --background: var(--background-active);
    }

    & span {
      font-size: .8rem;
    }

    & .icon {
      font-size: 2rem;
    }
  }
}

.Dialog {
  top: 50%;
  left: 50%;
  width: clamp(400px, 100vw, 1000px);
  translate: -50% -50%;
  border: none;
  border-radius: var(--radius-default);
  background: var(--clr-white);
  font-size: var(--font-size-default);
  color: var(--clr-black);
  position: relative;
  box-shadow: var(--box-shadow-z2);

  opacity: 0;
  scale: 0;
  transition:
      opacity var(--transition-default) ease-out,
      scale var(--transition-default) ease-out,
      overlay var(--transition-default) ease-out allow-discrete,
      display var(--transition-default) ease-out allow-discrete;

  &[open] {
    opacity: 1;
    scale: 1;

    &::backdrop {
      background-color: rgb(0 0 0 / 25%);
    }
  }

  &::backdrop {
    z-index: 2000;
    background-color: rgb(0 0 0 / 0%);
    transition:
        display var(--transition-default) allow-discrete,
        overlay var(--transition-default) allow-discrete,
        background-color var(--transition-default);
  }

  & > .wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--padding-default);
  }

  & header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--padding-default) var(--padding-default) 0;
  }

  & .pad {
    padding: 0 var(--padding-default);
  }

  & .note {
    display: block;
    border: 1px solid var(--clr-neutral);
    border-radius: var(--radius-default);
    width: 100%;
    padding: var(--padding-xs) var(--padding-default);
  }

  & footer {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--padding-default) var(--padding-default);
  }
}

@starting-style {
  dialog[open] {
    opacity: 0;
    scale: 0;

    &::backdrop {
      background-color: rgb(0 0 0 / 0%);
    }
  }
}
</style>