<dom-module id=“gs-attire”>

<script>
  Polymer({
    is: 'gs-attire',
    properties: {
      attireUrl: Object,
      observer: '_attireChanged'
    },

    attached: function () {
      this._setAttire();
    },
    _attireChanged: function () {
      this._setAttire();
    },
    _setAttire: function () {
      $.getJSON(this.attireUrl, function (attire) {
        GobstonesBoard && GobstonesBoard.setDefaultAttire(attire);
        attire.rules.forEach((rule) => $.get(rule.image));
      });
    }
  });
</script>

</dom-module>

<dom-module id=“gs-attire-toggle-button”>

<style>
  :host-context(.mu-kids-states) .button {
    position: absolute;
    cursor: pointer;
    top: -2px;
    right: 0;
    -ms-transform-origin: right center;
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }

  :host-context(.boards-container) .button {
    cursor: pointer;
    margin-top: -8px;
  }
</style>

<template>
  <template is="dom-if" if="{{shouldDisplay}}">
    <div class="button" on-click="_onButtonClick">
      <template is="dom-if" if="{{isEnabled}}">
        <img src="./attires_enabled.svg">
      </template>
      <template is="dom-if" if="{{!isEnabled}}">
        <img src="./attires_disabled.svg">
      </template>
    </div>
  </template>
</template>

<script>
  Polymer({
    is: 'gs-attire-toggle-button',
    properties: {
      isEnabled: {
        type: Boolean,
        value: true
      }
    },

    ready: function () {
      this._updateVisibility();
      document.addEventListener('board-attire-changed', this._updateVisibility.bind(this));
      this._relocateButton();
    },

    _updateVisibility: function () {
      this.boards = $(this).parents(".mu-kids-states, .boards-container").find("gs-board");
      this.shouldDisplay = this.boards.toArray().some(board => board.attire);
    },

    _onButtonClick: function () {
      this.isEnabled = !this.isEnabled;

      this.boards.each((__, board) => {
        if (board.attire) board.set("attire.enabled", this.isEnabled);
        board.updateStyles();
      });
    },

    _getEditor: function () {
      return $("mu-gobstones-custom-editor")[0];
    },

    _relocateButton: function () {
      const $container = $('.mu-kids-gbs-board-initial');
      if(!$container.length || this._getEditor().interactiveMode) return;
      const $header = $('.mu-initial-state-header');
      const headerWidth = $header.width() || $container.width();
      const $attireToggle = $container.find('.button.gs-attire-toggle-button');
      if(!$attireToggle.length) return setTimeout(() => this._relocateButton());
      const margin = 4; // Leave a margin between text and image
      const maxSize = 65.75; // Original width
      mumuki.resize(() => {
        $attireToggle.css('transform', 'scale(1)');
        let buttonSize = (($container.width() - headerWidth) / 2) - margin;
        let scaleX = Math.min(buttonSize, maxSize) / $attireToggle.width();
        $attireToggle.css('transform', `scale(${scaleX})`);
      });
    },
  });
</script>

</dom-module>