<template lang='pug'>
  aside#nervmag-menu
    #nervmag-menu-dialog.big(ref="menu" role="dialog" aria-hidden="true")
      header
        h1
        | {{ $t('parameters') }}
      main
        .form-aligned(action="#")
          .form-row
            label.form-label(for="nervmagmenu-font-size")
            | {{ $t('font-size') }}
            input#nervmagmenu-font-size.form-input(
              type="range" step=1 min=8 max=64
              v-model="fontSize")

          .form-row
            label.form-label(for="nervmagmenu-mode")
            | {{ $t('mode') }}
            select#nervmagmenu-mode.form-input(
              v-model="mode")
              option(value="normal") {{ $t("normal") }}
              option(value="gray") {{ $t("grayscale") }}
              option(value="gray-invert") {{ $t("grayscale-inverted") }}
              option(value="invert") {{ $t("invert") }}
              option(value="histogram") {{ $t("histogram") }}

          .form-row
            label.form-label(for="nervmagmenu-zoom")
            | {{ $t('zoom') }}
            input#nervmagmenu-zoom.form-input(
              type="range" step=0.1 min=1.0 max=100.0
              v-model="zoom")

          .form-row
            label.form-label(for="nervmagmenu-brightness")
            | {{ $t('brightness') }}
            input#nervmagmenu-brightness.form-input(
              type="range" min=0 max=300
              v-model="brightness")

          .form-row
            label.form-label(for="nervmagmenu-contrast")
            | {{ $t('contrast') }}
            input#nervmagmenu-contrast.form-input(
              type="range" min=0 max=300
              v-model="contrast")

          .form-row
            label.form-label(for="nervmagmenu-hue")
            | {{ $t('hue-rotation') }}
            input#nervmagmenu-hue.form-input(
              type="range" min=0 max=360
              v-model="hueRotation")

          .form-row
            label.form-label(for="nervmagmenu-text-color")
            | {{ $t('text-color') }}
            .form-input
              select#nervmagmenu-text-color(
                v-model="textColor")
                option(v-for="color in palette.order" :value="color")
                  | {{ $t(color) }}

          .form-row
            label.form-label(for="nervmagmenu-back-color")
            | {{ $t('background-color') }}
            .form-input
              select#nervmagmenu-back-color(
                v-model="backgroundColor")
                option(v-for="color in palette.order" :value="color")
                  | {{ $t(color) }}

          .form-row
            label.form-label(for="nervmagmenu-locale")
              | {{ $t('language') }}
            select#nervmagmenu-locale.form-input(
              v-model="locale")
              option(v-for="lang, code in locales" :value="code")
                | {{ lang }}

      footer
        button(
          ref="close"
          v-on:click="closeMenu"
          :aria-label="$t('close-menu')"
        )
          svg.icon(viewBox="0 0 32 32")
            use(href="@/img/icons/fontawesome/solid/check.svg")
          | {{ $t('close-menu') }}

    button#menu-button(
      ref="open"
      v-on:click="openMenu"
      :aria-label="$t('open-menu')"
      :title="$t('open-menu')"
    )
      svg.icon(viewBox="0 0 512 512")
        use(xlink:href="@/img/icons/fontawesome/solid/wrench.svg")
</template>

<script lang="ts">
import palette from '@/assets/palette.json';
import locales from '@/locale/locales.json';
import { Component, Vue } from 'vue-property-decorator';
import { mapGetters } from 'vuex';

@Component({
  computed: mapGetters([
    'locale', 'hueRotation',
    'textColor', 'backgroundColor',
    'mode', 'zoom', 'fontSize',
    'brightness', 'contrast']),
})
export default class NervMagMenu extends Vue {
  public $refs!: {
    open: HTMLElement;
    close: HTMLElement;
    menu: HTMLElement;
  };

  public data() {
    return {
      locales,
      palette,
    };
  }

  public mounted() {
    this.closeMenu();
  }

  public closeMenu() {
    this.$refs.open.removeAttribute('aria-hidden');
    this.$refs.close.setAttribute('aria-hidden', 'true');
    this.$refs.menu.setAttribute('aria-hidden', 'true');
  }

  public openMenu() {
    this.$refs.open.setAttribute('aria-hidden', 'true');
    this.$refs.close.removeAttribute('aria-hidden');
    this.$refs.menu.removeAttribute('aria-hidden');
  }
}
</script>

<i18n src="@/locale/nervmagmenu.json"></i18n>
<i18n src="@/locale/colors.json"></i18n>

<style scoped lang="stylus">
#menu-button
  position fixed
  bottom 1em
  right 1em
</style>
