{{#if _showCloser}}
  <div
      class="ui-pnotify-closer {{(!closerHover || _mouseIsIn) ? '' : 'ui-pnotify-buttons-hidden'}}"
      role="button"
      tabindex="0"
      title="{{labels.close}}"
      on:click="handleCloserClick()">
    <span class="{{_closerClass}}"></span>
  </div>
{{/if}}
{{#if _showSticker}}
  <div
      class="ui-pnotify-sticker {{(!stickerHover || _mouseIsIn) ? '' : 'ui-pnotify-buttons-hidden'}}"
      role="button"
      aria-pressed="{{_options.hide}}"
      tabindex="0"
      title="{{_options.hide ? labels.stick : labels.unstick}}"
      on:click="handleStickerClick()">
    <span class="{{_options.hide ? _pinUpClass : _pinDownClass}}"></span>
  </div>
{{/if}}

<script>
  import PNotify from "./PNotify.html";

  export default {
    setup (Component) {
      Component.key = "Buttons";

      Component.defaults = {
        // Provide a button for the user to manually close the notice.
        closer: true,
        // Only show the closer button on hover.
        closerHover: true,
        // Provide a button for the user to manually stick the notice.
        sticker: true,
        // Only show the sticker button on hover.
        stickerHover: true,
        // Show the buttons even when the NonBlock module is in use.
        showOnNonblock: false,
        // The various displayed text, helps facilitating internationalization.
        labels: {
          close: "Close",
          stick: "Stick",
          unstick: "Unstick"
        },
        // The classes to use for button icons. Leave them null to use the classes from the styling you're using.
        classes: {
          closer: null,
          pinUp: null,
          pinDown: null
        }
      };

      // Register the module with PNotify.
      PNotify.modules.Buttons = Component;
      // Prepend this module to the container.
      PNotify.modulesPrependContainer.push(Component);

      // Add button icons to icons objects.
      Object.assign(PNotify.icons.brighttheme, {
        closer: "brighttheme-icon-closer",
        pinUp: "brighttheme-icon-sticker",
        pinDown: "brighttheme-icon-sticker brighttheme-icon-stuck"
      });
      Object.assign(PNotify.icons.bootstrap3, {
        closer: "glyphicon glyphicon-remove",
        pinUp: "glyphicon glyphicon-pause",
        pinDown: "glyphicon glyphicon-play"
      });
      Object.assign(PNotify.icons.fontawesome4, {
        closer: "fa fa-times",
        pinUp: "fa fa-pause",
        pinDown: "fa fa-play"
      });
      Object.assign(PNotify.icons.fontawesome5, {
        closer: "fas fa-times",
        pinUp: "fas fa-pause",
        pinDown: "fas fa-play"
      });
    },

    oncreate () {
      this.fire("init", {module: this});
    },

    data () {
      return Object.assign({
        "_notice": null, // The PNotify notice.
        "_options": {}, // The options for the notice.
        "_mouseIsIn": false,
      }, PNotify.modules.Buttons.defaults);
    },

    computed: {
      // Whether to show the sticker icon.
      _showSticker: (sticker, showOnNonblock, _options) => sticker && (!(_options.modules && _options.modules.NonBlock && _options.modules.NonBlock.nonblock) || showOnNonblock),
      // Whether to show the closer icon.
      _showCloser: (closer, showOnNonblock, _options) => closer && (!(_options.modules && _options.modules.NonBlock && _options.modules.NonBlock.nonblock) || showOnNonblock),
      // These are button icon classes.
      _pinUpClass: (classes, _notice) => _notice ? (classes.pinUp === null ? _notice.get("_icons").pinUp : classes.pinUp) : '',
      _pinDownClass: (classes, _notice) => _notice ? (classes.pinDown === null ? _notice.get("_icons").pinDown : classes.pinDown) : '',
      _closerClass: (classes, _notice) => _notice ? (classes.closer === null ? _notice.get("_icons").closer : classes.closer) : '',
    },

    methods: {
      initModule(options) {
        this.set(options);
        this.get("_notice").on("mouseenter", () => this.set({"_mouseIsIn": true}));
        this.get("_notice").on("mouseleave", () => this.set({"_mouseIsIn": false}));
        this.get("_notice").observe("hide", (hide) => {
          const sticker = this.get("sticker");

          if (!sticker) {
            return;
          }

          // Font Awesome 5 replaces our lovely element with a gross SVG. In order
          // to make it play nice with Svelte, we have to clear the element and
          // make it again.
          const icon = hide ? this.get("classes").pinUp : this.get("classes").pinDown;
          if (
              (this.get("_notice").get("icons") === "fontawesome5")
              || (typeof icon === "string" && icon.match(/(^| )fa[srlb]($| )/))
            ) {
            this.set({"sticker": false});
            this.set({"sticker": true});
          }
        });
      },

      handleStickerClick() {
        const _notice = this.get("_notice");
        _notice.update({hide: !_notice.get("hide")});
      },

      handleCloserClick() {
        this.get("_notice").close(false);
        this.set({"_mouseIsIn": false});
      }
    }
  }
</script>

<style>
  .ui-pnotify-closer,
  .ui-pnotify-sticker {
    float: right;
    margin-left: .5em;
    cursor: pointer;
  }
  :global([dir=rtl]) .ui-pnotify-closer,
  :global([dir=rtl]) .ui-pnotify-sticker {
    float: left;
    margin-right: .5em;
    margin-left: 0;
  }
  .ui-pnotify-buttons-hidden {
    visibility: hidden;
  }
</style>