<template>
  <div class="flex flex-col 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">{{gmailLink}}</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
// import Comms from '@src/ext/lib/comms/Comms';
// import ShortcutButton from '@src/common/components/ShortcutButton';
import BrowserDetect from '@src/ext/conf/BrowserDetect';

export default {
  components: {
  },
  data() {
    return {
      // reminder — webextension-polyfill doesn't seem to work in vue!
      addonVersion: BrowserDetect.firefox ? chrome.runtime.getManifest().version : chrome.runtime.getManifest().version,
      loggingEnabled: false,
      loggerSettings: '',
      loggerSettingsError: false,
      lastLoadedLoggerSettings: undefined,
      mailtoLink: '',
      showEasterEgg: false,
      gmailLink: '',
    }
  },
  async created() {
    const b64="dGFtaXVzLmhhbkBnbWFpbC5jb20";
    this.gmailLink = atob(b64);
    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:${this.gmailLink}?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${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>

