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

const theme = useVThemeSSR()
const config = useAppConfig()
const fqdn = config.url.split('//')[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 pages = storeToRefs(usePageStore())
</script>

<template>
  <VDialog width="auto">
    <template #activator="{ props }">
      <div v-bind="props" class="options clickable">
        <img
          draggable="false"
          :src="cogIcon"
          alt="Options"
          class="logo user-select-none"
        />
      </div>
    </template>
    <template #default="{ isActive }">
      <VCard>
        <img
          draggable="false"
          :src="pearlIcon"
          alt="Pearl"
          class="icon-badge user-select-none"
        />

        <template #title>
          <h3 class="alex text-align-center">Site options</h3>
        </template>

        <div class="overlay background"></div>
        <template #text>
          <p class="center mb-3">
            This tab is experimental and isn't ready for production.
            <em>I was too lazy to exclude it from the build.</em><br />
            <strong>Features provided here may or may not work.</strong>
          </p>

          <div>
            <VRow>
              <VCol>
                <strong>Theme</strong>
                <p>Available in all flavors, vanilla and chocolate.</p>
                <VBtn variant="flat" color="secondary" @click="theme.toggle()">
                  Toggle theme
                </VBtn>
              </VCol>
              <VCol>
                <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>
                <VBtn
                  variant="flat"
                  color="primary"
                  @click="pages.animate.value = !pages.animate.value"
                >
                  Stop animation
                </VBtn>
              </VCol>
            </VRow>
          </div>
          <span class="mt-3">
            Since you're so curious and thus here, why not report a bug from the
            production environment behind this tab?<br />
            It will greatly help me improve the website!
            <EMail
              class="link-hi"
              :address="`contact@${fqdn}`"
              :cc="`admin@${fqdn}`"
              :subject="`Bug report: ${fqdn}`"
              :body="mailTemplate"
            >
              <strong>Report a bug</strong>
            </EMail>
          </span>
        </template>

        <template #actions>
          <VSpacer />
          <VBtn
            variant="outlined"
            prepend-icon="close"
            @click="isActive.value = false"
          >
            Close
          </VBtn>
        </template>
      </VCard>
    </template>
  </VDialog>
</template>

<style scoped lang="scss">
.options {
  display: flex;
  position: fixed;

  top: 0;
  right: 0;

  padding: 10px;
}

.icon-badge {
  position: fixed;

  top: -48px;
  left: -32px;

  transform: rotate(-15deg);
}

.logo {
  width: 16px;
  height: 16px;
}
</style>
