'use strict';

window.App = {
  name: 'App',

  components: {
    NumberInput,
    VueSlider: window['vue-slider-component'],
  },

  data() {
    return {
      currentTab: 'menu',
      disableWatch: false,
      ...cloneDeep(DEFAULTS),
    };
  },

  computed: {
    canLimitProperties() {
      return this.isTitleOnly || this.isAutoCrop || this.display.important;
    },

    displayModes() {
      return Object.entries(DisplayMode).sort((a, b) => {
        return this.$t(`settings.displayMode.${a[0]}`).length - this.$t(`settings.displayMode.${b[0]}`).length;
      });
    },

    isHorizontal() {
      return this.isDefault || this.isAutoWrap || this.isAutoCrop;
    },

    isTitleOnly() {
      return this.display.mode === DisplayMode.TITLE_ONLY;
    },

    isAutoCrop() {
      return this.display.mode === DisplayMode.AUTO_CROP;
    },

    isAutoWrap() {
      return this.display.mode === DisplayMode.AUTO_WRAP;
    },

    isDefault() {
      return this.display.mode === DisplayMode.DEFAULT;
    },
  },

  created() {
    Object.entries(getState()).forEach(([target, value]) => {
      this[target] = value;

      this.$watch(
        target,
        function (value) {
          if (this.disableWatch) return;
          post([{ type: 'settings', target, value }]);
        },
        { deep: true }
      );
    });
  },

  mounted() {
    DISABLED_EVENTS.forEach((event) => {
      // Only the `auxclick` event should be captured:
      window.addEventListener(event, preventEvent, event === 'auxclick');
    });

    emitter.on('scenario.settings', this.updateSettings);
    document.addEventListener('keydown', this.keydownHandler);
  },

  destroyed() {
    DISABLED_EVENTS.forEach((event) => {
      window.removeEventListener(event, preventEvent);
    });

    emitter.off('scenario.settings', this.updateSettings);
    document.removeEventListener('keydown', this.keydownHandler);
  },

  methods: {
    resetAll() {
      this.disableWatch = true;

      post(
        Object.entries(cloneDeep(DEFAULTS)).map(([target, value]) => ({
          target,
          type: 'settings',
          value: (this[target] = value),
        }))
      );

      this.$nextTick(() => (this.disableWatch = false));
    },

    resetZoom() {
      this.zoom = DEFAULTS.zoom;
    },

    resetSymbolsLimit() {
      this.limit.symbols = DEFAULTS.limit.symbols;
    },

    resetPropertiesLimit() {
      this.limit.properties = DEFAULTS.limit.properties;
    },

    resetSelectorPreviewScale() {
      this.selectorPreview.scale = DEFAULTS.selectorPreview.scale;
    },

    handleMenuClick(target) {
      if (target === 'menu' || target === 'settings') {
        this.currentTab = target;
        return;
      }
      post([{ type: 'action', target }]);
    },

    updateSettings(items = []) {
      if (!Array.isArray(items)) return;
      this.disableWatch = true;

      items.forEach(({ type, value, target }) => {
        if (type === 'settings') {
          if (target === 'smart') {
            this.smart = value;
          } else if (target === 'visibility') {
            this.visibility = Object.assign({}, this.visibility, value);
          }
        }
      });

      this.$nextTick(() => (this.disableWatch = false));
    },

    keydownHandler({ code, repeat, ctrlKey }) {
      if (!repeat && ctrlKey) {
        if (ACTIONS[code]) {
          post([{ type: 'action', target: ACTIONS[code] }]);
        } else if (code === 'Slash') {
          this.display.comments = !this.display.comments;
        }
      }
    },
  },

  template: html`
    <div id="app">
      <div class="page" v-show="currentTab === 'menu'">
        <ul class="menu">
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('settings')">
              <img src="src/assets/icons/appearance.svg" alt />
              <span v-t="'menu.appearance'"></span>
              <img src="src/assets/icons/chevron-right.svg" alt />
            </a>
          </li>
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('search')">
              <img src="src/assets/icons/search.svg" alt />
              <span v-t="'menu.search'"></span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('inspector')">
              <img src="src/assets/icons/inspector.svg" alt />
              <span v-t="'menu.inspector'"></span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('manager')">
              <img src="src/assets/icons/manager.svg" alt />
              <span v-t="'menu.manager'"></span>
            </a>
          </li>
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('help')">
              <img src="src/assets/icons/help.svg" alt />
              <span v-t="'menu.help'"></span>
            </a>
          </li>
        </ul>
      </div>
      <div class="page" v-show="currentTab === 'settings'">
        <ul class="menu">
          <li class="menu-item">
            <a href="#" @click="handleMenuClick('menu')">
              <img src="src/assets/icons/menu.svg" alt />
              <span v-t="'menu.menu'"></span>
              <img src="src/assets/icons/chevron-left.svg" alt />
            </a>
          </li>
        </ul>
        <div>
          <fieldset>
            <legend v-t="'settings.zoom'"></legend>
            <div>
              <vue-slider
                min="50"
                max="200"
                id="zoom"
                interval="1"
                v-model="zoom"
                tooltip="none"
                :contained="true"
                :hide-label="true"
                :marks="[50, 75, 100, 125, 150, 175, 200]"
              >
                <template v-slot:step="{ active }">
                  <div :class="['vue-slider-step', { active }]"></div>
                </template>
              </vue-slider>
              <number-input min="50" max="200" v-model="zoom" />
              <button class="button" type="button" @click="resetZoom">
                <img src="src/assets/icons/reset.svg" alt />
              </button>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.theme'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="smart" v-model="smart" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="smart" v-t="'settings.smart'"></label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.traceLegend'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="trace" v-model="trace" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="trace" v-t="'settings.traceCheckbox'"></label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.debug'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="debugPreview" v-model="debug.preview" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="debugPreview" v-t="'settings.debugPreview'"></label>
                </div>
              </div>
            </div>
            <div style="color:gray" v-t="'settings.debugPreviewAdditional'"></div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.visibility'"></legend>
            <div v-for="(_, key) in visibility" :key="key">
              <div class="pretty p-svg p-curve">
                <input type="checkbox" :id="key" v-model="visibility[key]" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label :for="key" v-t="'settings.' + key"></label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.window'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="topmost" v-model="topmost" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="topmost" v-t="'settings.topmost'"></label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.selectorPreview.legend'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="selectorPreviewVisible" v-model="selectorPreview.visible" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="selectorPreviewVisible" v-t="'settings.selectorPreview.visible'"></label>
                </div>
              </div>
            </div>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="selectorPreviewCanCreate" v-model="selectorPreview.canCreate" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="selectorPreviewCanCreate" v-t="'settings.selectorPreview.canCreate'"></label>
                </div>
              </div>
            </div>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="selectorPreviewCanUpdate" v-model="selectorPreview.canUpdate" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="selectorPreviewCanUpdate" v-t="'settings.selectorPreview.canUpdate'"></label>
                </div>
              </div>
            </div>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="selectorPreviewHideSelector" v-model="selectorPreview.hideSelector" :disabled="isTitleOnly || !selectorPreview.visible" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="selectorPreviewHideSelector" v-t="'settings.selectorPreview.hideSelector'"></label>
                </div>
              </div>
            </div>
            <fieldset>
              <legend v-t="'settings.selectorPreview.scale'"></legend>
              <div>
                <vue-slider
                  min="1"
                  max="5"
                  interval="1"
                  tooltip="none"
                  :contained="true"
                  :hide-label="true"
                  :marks="[1, 2, 3, 4, 5]"
                  id="selectorPreviewScale"
                  v-model="selectorPreview.scale"
                >
                  <template v-slot:step="{ active }">
                    <div :class="['vue-slider-step', { active }]"></div>
                  </template>
                </vue-slider>
                <number-input min="1" max="5" v-model="selectorPreview.scale"/>
                <button class="button" type="button" @click="resetSelectorPreviewScale">
                  <img src="src/assets/icons/reset.svg" alt />
                </button>
              </div>
            </fieldset>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.display'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="displayInline" v-model="display.inline" :disabled="!isHorizontal" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="displayInline" v-t="'settings.displayInline'"></label>
                </div>
              </div>
            </div>
            <div v-for="([key, value]) in displayModes" :key="key">
              <div class="pretty p-default p-round">
                <input type="radio" :id="key" :value="value" v-model.number="display.mode" />
                <div class="state">
                  <label :for="key" v-t="'settings.displayMode.' + key"></label>
                </div>
              </div>
            </div>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.propertiesHide'"></legend>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="displayImportant" v-model="display.important" :disabled="isTitleOnly" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="displayImportant" v-t="'settings.displayImportant'"></label>
                </div>
              </div>
            </div>
            <div>
              <div class="pretty p-svg p-curve">
                <input type="checkbox" id="displayAll" v-model="display.all" :disabled="isTitleOnly" />
                <div class="state">
                  <img class="svg" src="src/assets/icons/check.svg" alt />
                  <label for="displayAll" v-t="'settings.displayAll'"></label>
                </div>
              </div>
            </div>
            <fieldset>
              <legend v-t="'settings.propertiesLimit'"></legend>
              <div>
                <vue-slider
                  min="1"
                  max="100"
                  interval="1"
                  tooltip="none"
                  :contained="true"
                  :hide-label="true"
                  id="propertiesLimit"
                  v-model="limit.properties"
                  :marks="[1, 25, 50, 75, 100]"
                  :disabled="canLimitProperties"
                >
                  <template v-slot:step="{ active }">
                    <div :class="['vue-slider-step', { active }]"></div>
                  </template>
                </vue-slider>
                <number-input min="1" max="100" v-model="limit.properties" :disabled="canLimitProperties" />
                <button class="button" type="button" @click="resetPropertiesLimit" :disabled="canLimitProperties">
                  <img src="src/assets/icons/reset.svg" alt />
                </button>
              </div>
            </fieldset>
          </fieldset>
          <fieldset>
            <legend v-t="'settings.symbolsLimit'"></legend>
            <div>
              <vue-slider
                min="20"
                max="100"
                interval="10"
                tooltip="none"
                :contained="true"
                :hide-label="true"
                id="symbolsLimit"
                v-model="limit.symbols"
                :marks="[20, 30, 40, 50, 60, 70, 80, 90, 100]"
                :disabled="isTitleOnly"
              >
                <template v-slot:step="{ active }">
                  <div :class="['vue-slider-step', { active }]"></div>
                </template>
              </vue-slider>
              <number-input min="20" max="100" v-model="limit.symbols" :disabled="isTitleOnly" />
              <button class="button" type="button" @click="resetSymbolsLimit" :disabled="isTitleOnly">
                <img src="src/assets/icons/reset.svg" alt />
              </button>
            </div>
          </fieldset>
        </div>
        <button class="button" type="button" @click="resetAll">
          <span v-t="'reset'"></span>
        </button>
      </div>
    </div>
  `,
};
