/**
 * Info popup window - displays one server-rendered info popup.
 *
 * The complete markup (content-only or with media region) is built on the
 * server and passed in via the "html" option; this control only injects it,
 * wires up accessibility and shows the window.
 *
 * @module package/quiqqer/info-popup/bin/controls/InfoPopup
 * @author www.pcsg.de
 */
define('package/quiqqer/info-popup/bin/controls/InfoPopup', [

    'qui/QUI',
    'qui/controls/windows/SimpleWindow',
    'Locale',

    'css!package/quiqqer/info-popup/bin/controls/InfoPopup.css'

], function (QUI, SimpleWindow, QUILocale) {
    "use strict";

    const lg = 'quiqqer/info-popup';
    let dialogCounter = 0;

    return new Class({

        Extends: SimpleWindow,
        Type: 'package/quiqqer/info-popup/bin/controls/InfoPopup',

        Binds: [
            '$onOpen',
            '$onKeyUp'
        ],

        options: {
            html: '',
            maxWidth: 800,
            maxHeight: 600,
            mobileMode: 'popup',
            backgroundClosable: false,
            resizable: false
        },

        initialize: function (options) {
            this.parent(options);

            this.addEvents({
                onOpen: this.$onOpen
            });
        },

        /**
         * event : on open - inject the server markup and set up accessibility
         */
        $onOpen: function () {
            const Elm = this.getElm();
            const Content = this.getContent();

            // server-rendered, trusted markup (Output::parse + {image})
            Content.set('html', this.getAttribute('html') || '');

            Elm.setAttribute('role', 'dialog');
            Elm.setAttribute('aria-modal', 'true');

            const Title = Content.querySelector('[data-name="title"]');

            if (Title) {
                if (!Title.id) {
                    Title.id = 'quiqqer-info-popup-title-' + (++dialogCounter);
                }

                Elm.setAttribute('aria-labelledby', Title.id);
            } else {
                Elm.setAttribute('aria-label', QUILocale.get(lg, 'package.title'));
            }

            // close button: accessible name + decorative icon
            const CloseButton = Elm.querySelector('[name="close"]');

            if (CloseButton) {
                CloseButton.setAttribute('aria-label', QUILocale.get(lg, 'popup.close'));

                const CloseIcon = CloseButton.querySelector('.fa');

                if (CloseIcon) {
                    CloseIcon.setAttribute('aria-hidden', 'true');
                }
            }

            // move focus into the dialog itself (not onto the close button) so
            // keyboard / screen-reader users are placed inside it and ESC
            // closes it - without a focus ring on the "X".
            Elm.setAttribute('tabindex', '-1');
            Elm.focus();
            Elm.addEventListener('keyup', this.$onKeyUp);
        },

        /**
         * Close the popup on ESC.
         *
         * @param {KeyboardEvent} event
         */
        $onKeyUp: function (event) {
            if (event.key === 'Escape') {
                this.close();
            }
        }
    });
});
