<template>
  <div class="flex flex-column h100">
    <div class="row">
      <span class="label">Ultrawidify version:</span><br/> {{addonVersion}}
    </div>
    <div class="row">
    <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
      <ul>
        <li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
        <li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
        <li>PM me on <a target="_blank" :href="redditLink">reddit</a><br/></li>
      </ul>
    </div>

    <div class="flex-grow"></div>

    <div class="row">
      <span class="label">Swatter mode (logging)</span><br/>
    </div>
    <div v-if="showEasterEgg" class="center"><small>You've made plenty of marks, all in the wrong places!</small></div>
    <div class="flex flex-row">
      <ShortcutButton class="flex flex-grow button"
                      label="Show logger"
                      :active="loggingEnabled"
                      @click.native="showLogger()"
      ></ShortcutButton>
      <ShortcutButton class="flex flex-grow button"
                      label="Make a mark"
                      @click.native="sendMark()"
      ></ShortcutButton>
      <ShortcutButton class="flex flex-grow button"
                      label="Hide logger"
                      @click.native="hideLogger()"
      ></ShortcutButton>
    </div>
  </div>
</template>

<script lang="ts">
import Comms from '../../ext/lib/comms/Comms';
import ShortcutButton from '../../common/components/ShortcutButton.vue';
import BrowserDetect from '../../ext/conf/BrowserDetect';
import { browser } from 'webextension-polyfill-ts';

import Vue from 'vue'
export default Vue.extend({
  components: {
    ShortcutButton,
 },
  data() {
    return {
      // reminder — webextension-polyfill doesn't seem to work in vue!
      addonVersion: browser.runtime.getManifest().version,
      loggingEnabled: false,
      loggerSettings: '',
      loggerSettingsError: false,
      lastLoadedLoggerSettings: undefined,
      mailtoLink: '',
      redditLink: '',
      showEasterEgg: false,
    }
  },
  async created() {
    const messageTemplate = encodeURIComponent(
`Describe your issue in more detail. In case of misaligned videos, please provide screenshots. When reporting\
 issues with autodetection not detecting aspect ratio correctly, please provide a link with timestamp to the\
 problematic video at the time where the problem happens. You may delete this paragraph, as it's only a template.


Extension info (AUTOGENERATED — DO NOT CHANGE OR REMOVE):
* Build: ${BrowserDetect.processEnvBrowser}-${this.addonVersion}-stable

Browser-related stuff (please ensure this section is correct):
* User Agent string: ${window.navigator.userAgent}
* vendor: ${window.navigator.vendor}
* Operating system: ${window.navigator.platform}
`
      );
    this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
    this.redditLink = `https://www.reddit.com/message/compose?to=xternal7&subject=[Ultrawidify]%20ENTER%20SUMMARY%20OF%20YOUR%20PROBLEM%20HERE&message=${messageTemplate}`;
  },
  methods: {
    async updateLoggerSettings(allowLogging) {
      // this.loggingEnabled = allowLogging;
      // if (allowLogging) {
      //   const parsedSettings = JSON.parse(this.loggerSettings);
      //   Logger.saveConfig({
      //     allowLogging: allowLogging,
      //     timeout: parsedSettings.timeout || undefined,
      //     fileOptions: parsedSettings.fileOptions || {},
      //     consoleOptions: parsedSettings.consoleOptions || {},
      //   });
      // } else {
      //   // we need to save logger settings because logging is triggered by allow logging
      //   Logger.saveConfig({allowLogging: allowLogging, ...lastLoadedLoggerSettings});
      // }
    },
    showLogger() {
      Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
    },
    sendMark() {
      this.showEasterEgg = !this.showEasterEgg;
    },
    hideLogger() {
      Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
    }
  }
})
</script>
