<script setup lang="ts">
import cogIcon from '~/assets/images/icons/cog.png'
import pearlIcon from '~/assets/images/icons/pearl.gif'

const config = useAppConfig()
const { animate } = storeToRefs(usePageStore())

const fqdn = config.url.split('//').at(1)
const mailTemplate = `I've just found a bug on ${config.url} and would like to report it.%0D%0A%0D%0AWebsite version: ${
  config.build.version
}%0D%0ABuild date: ${
  config.build.date
}%0D%0ATimestamp: ${new Date().toISOString()}%0D%0A%0D%0A%0D%0ASteps to reproduce:%0D%0A{ Explain in detail what happened here, or attach a video/screenshot }%0D%0A%0D%0AAdditional information:%0D%0A{ Helpful information, such as developer console output / Leave empty if none }%0D%0A%0D%0A%0D%0A// Keep in mind that it's just a template, you can change it as you wish! :)`

const active = ref(false)
</script>

<template>
  <div
    class="absolute top-0 right-0 flex flex-col cursor-pointer select-none p-2"
    @click="active = true"
  >
    <img
      draggable="false"
      :src="cogIcon"
      alt="Options"
      width="16"
      height="16"
    />
  </div>
  <Transition
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
  >
    <div
      v-if="active"
      class="fixed top-0 left-0 flex flex-row justify-center items-center w-full h-full z-20"
    >
      <div
        class="relative flex flex-col gap-4 accent-overlay-background rounded-xl max-w-[800px] mx-4 p-4"
      >
        <img
          draggable="false"
          :src="pearlIcon"
          alt="Pearl"
          class="absolute -top-8 -left-6 badge select-none w-16 lg:w-auto"
        />

        <h3 class="text-center">Site settings</h3>

        <div class="overlay accent-overlay-background" />
        <div class="overlay">
          <p class="mb-3">
            The site settings are experimental. Suggest what you want to see
            here next!
            <strong>Please report any bugs that may occur.</strong>
          </p>

          <div class="flex flex-col md:flex-row gap-4">
            <div class="md:basis-0 flex-grow">
              <strong>Theme</strong>
              <p>Available in vanilla and chocolate flavors.</p>

              <select
                v-model="$colorMode.preference"
                class="accent accent-overlay-background"
              >
                <option value="system">System</option>
                <option value="light">Light</option>
                <option value="dark">Dark</option>
                <option value="sepia">Sepia</option>
              </select>
            </div>
            <div class="md:basis-0 flex-grow">
              <strong>Animation</strong>
              <p>
                Some computers may have issues rendering that gorgeous
                background animation. Disabling it substantially decreases power
                consumption, but also makes the website less cool.
              </p>
              <input v-model="animate" type="checkbox" color="primary" />
            </div>
          </div>
          <span class="mt-3">
            <EMail
              :address="`contact@${fqdn}`"
              :cc="`admin@${fqdn}`"
              :subject="`Bug report: ${fqdn}`"
              :body="mailTemplate"
            >
              <strong>Report a bug</strong>
            </EMail>
          </span>
        </div>

        <button @click="active = false">Close</button>
      </div>
    </div>
  </Transition>
</template>

<style scoped lang="scss">
.badge {
  transform: rotate(-15deg);
}
</style>
