"use strict";
(() => {
    const RegisteredElementsType = 'QuizEmbeddedElementRegistered';
    class Teaser {
        constructor(conf) {
            this.conf = conf;
            this.MAX_WIDTH = 892;
            this.phabletWidthBreakpoint = '(max-width: 625px)';
            this.phabletWidth = window.matchMedia(this.phabletWidthBreakpoint);
            this.belowTeaserMaxWidth = window.matchMedia(`(max-width: ${this.MAX_WIDTH}px)`);
            this.stylingFn = [];
            this.element = this.createElement('div', {
                height: ([phabletMatch]) => phabletMatch ? '450px' : `286px`,
                position: 'relative',
            });
            this.element.appendChild(this.buildBackground());
            this.element.appendChild(this.buildCard());
            this.phabletWidth.addEventListener('change', () => {
                this.applyStyles();
            });
            this.belowTeaserMaxWidth.addEventListener('change', () => {
                this.applyStyles();
            });
            this.applyStyles();
        }
        createElement(tagName, stylings, innerText) {
            const element = document.createElement(tagName);
            if (Object.values(stylings).length) {
                this.stylingFn.push((mediaMatch) => {
                    this.setStyling(element, stylings, mediaMatch);
                });
            }
            if (innerText) {
                element.innerText = innerText;
            }
            return element;
        }
        buildBackground() {
            const backgroundWrapper = this.createElement('div', {
                height: ([phabletMatch]) => phabletMatch ? '450px' : `286px`,
                borderRadius: ([, maxWithMatch]) => maxWithMatch ? '0' : '4px',
                left: '0',
                top: '0',
                width: '100%',
                display: 'flex',
                overflow: 'hidden',
                position: 'absolute',
                justifyContent: 'center',
                alignItems: 'center'
            });
            const pictureElement = this.createElement('picture', {
                width: '100%',
            });
            const sourceElement = document.createElement('source');
            sourceElement.setAttribute('srcset', 'https://img.zeit.de/spiele/teaser-bilder/quiz-teaser-bg/wide__800x450 1x,'
                + ' https://img.zeit.de/spiele/teaser-bilder/quiz-teaser-bg/wide__800x450__scale_2 2x');
            sourceElement.setAttribute('media', this.phabletWidthBreakpoint);
            sourceElement.setAttribute('type', 'image/webp');
            const imageElement = this.createElement('img', {
                width: ([phabletMatch]) => phabletMatch ? 'auto' : `100%`,
                height: ([phabletMatch]) => phabletMatch ? '100%' : `auto`
            });
            imageElement.setAttribute('loading', 'lazy');
            imageElement.setAttribute('src', `https://img.zeit.de/spiele/teaser-bilder/quiz-teaser-bg/wide__889x500`);
            imageElement.setAttribute('srcset', 'https://img.zeit.de/spiele/teaser-bilder/quiz-teaser-bg/wide__889x500__scale_2 2x');
            imageElement.setAttribute('type', 'image/webp');
            pictureElement.appendChild(sourceElement);
            pictureElement.appendChild(imageElement);
            backgroundWrapper.appendChild(pictureElement);
            return backgroundWrapper;
        }
        buildCard() {
            const cardDiv = this.createElement('div', {
                display: 'flex',
                maxWidth: '480px',
                width: '100%',
                padding: '24px',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                gap: '16px',
                flexShrink: '0',
                borderRadius: '4px',
                background: 'var(--z-background-primary, #FFF)',
                boxShadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.05)',
                margin: '0 auto',
            });
            const subHeader = this.createElement('div', {
                fontSize: 'var(--z-ds-fontsize-14)',
                fontStyle: 'normal',
                fontWeight: '400',
                lineHeight: '10px',
            }, this.conf?.quizDateStr);
            const headingElement = this.createElement('h3', {
                fontSize: ([pahbletMatches]) => pahbletMatches ? 'var(--z-ds-fontsize-20, 20px)' : 'var(--z-ds-fontsize-22, 22px)',
                fontStyle: 'normal',
                fontWeight: '700',
                lineHeight: '120%',
                textAlign: 'center',
                margin: (matches) => matches ? '-4.5px 0' : '-5.4px 0',
            }, this.conf?.quizHeadline);
            const questionEl = this.createElement('p', {
                fontSize: 'var(--z-ds-fontsize-16)',
                fontStyle: 'normal',
                fontWeight: '400',
                lineHeight: '150%',
                color: 'var(--z-ds-color-text-70)',
                margin: '-6px 0 2px',
                textAlign: 'center'
            }, this.conf?.firstQuestionText);
            const startButton = this.createElement('a', {
                cursor: 'pointer',
            }, this.conf?.ctaButtonLabel);
            startButton.classList.add('btn', 'btn--dark');
            startButton.tabIndex = 0;
            startButton.addEventListener('click', () => {
                this.ctaEventListener();
            });
            startButton.addEventListener('keypress', (event) => {
                if (event.code === 'Space' || event.code === 'Enter') {
                    this.ctaEventListener();
                }
            });
            cardDiv.appendChild(subHeader);
            cardDiv.appendChild(headingElement);
            cardDiv.appendChild(questionEl);
            cardDiv.appendChild(startButton);
            const cardWrapperElement = this.createElement('div', {
                height: ([phabletMatch]) => phabletMatch ? '450px' : `286px`,
                width: '100%',
                padding: '0 var(--z-ds-space-16, 16px)',
                display: 'flex',
                position: 'absolute',
                top: '0',
                left: '0',
                flexDirection: 'column',
                justifyContent: 'center',
            });
            cardWrapperElement.appendChild(cardDiv);
            return cardWrapperElement;
        }
        setStyling(el, stylings, mediaMatch) {
            Object.keys(stylings).forEach((key) => {
                const stylingsEntry = stylings[key];
                if (typeof stylingsEntry === 'function') {
                    el.style[key] = stylingsEntry(mediaMatch);
                }
                else {
                    el.style[key] = stylingsEntry;
                }
            });
        }
        applyStyles() {
            this.stylingFn.forEach(fn => {
                fn([this.phabletWidth.matches, this.belowTeaserMaxWidth.matches]);
            });
        }
    }
    class QuizAppLauncher {
        constructor(container, quizIdStr, quizBasePath, previewString) {
            this.container = container;
            this.quizIdStr = quizIdStr;
            this.quizBasePath = quizBasePath;
            this.previewString = previewString;
            this.TRANSITION_TIME = 600;
            this.fired = false;
            this.preview = false;
            window.addEventListener(RegisteredElementsType, (e) => { this.registerEventDetails = e.detail; }, { once: true });
            this.preview = previewString === 'enabled';
        }
        engage(teaserElement) {
            return new Promise(resolve => {
                if (!this.fired) {
                    this.fired = true;
                    const transTime = this.TRANSITION_TIME;
                    this.container.style.transition = `all ${transTime}ms ease-out`;
                    this.container.style.opacity = '0';
                    this.container.style.zIndex = '4';
                    this.container.style.position = 'relative';
                    Promise.all([
                        this.registerQuizElement(),
                        new Promise(resolve => {
                            setTimeout(resolve, transTime);
                        }),
                    ]).then(([regDetails]) => {
                        const { tagName, attributeNames } = regDetails;
                        const embEl = document.createElement(tagName);
                        embEl.setAttribute(attributeNames.initHeight, `${teaserElement.offsetHeight}`);
                        embEl.setAttribute(attributeNames.quizId, this.quizIdStr);
                        embEl.setAttribute(attributeNames.preview, JSON.stringify(this.preview));
                        container.appendChild(embEl);
                        teaserElement.parentElement.removeChild(teaserElement);
                        this.container.style.opacity = '1';
                        resolve();
                    });
                }
                else {
                    resolve();
                }
            });
        }
        registerQuizElement() {
            return new Promise(resolve => {
                if (this.registerEventDetails) {
                    resolve(this.registerEventDetails);
                }
                else {
                    const collection = document.getElementsByTagName('quiz-root');
                    let quizRoot;
                    if (collection.length) {
                        quizRoot = collection[0];
                    }
                    else {
                        const ngStyles = document.createElement('link');
                        ngStyles.rel = 'stylesheet';
                        ngStyles.href = `${this.quizBasePath}styles.css?ck=${encodeURIComponent(location.origin)}`;
                        document.head.appendChild(ngStyles);
                        quizRoot = document.createElement('quiz-root');
                        quizRoot.setAttribute('embedded', '');
                        if (this.preview) {
                            quizRoot.setAttribute('preview', '');
                        }
                        this.container.append(quizRoot);
                        this.container.appendChild(this.createModuleScriptTag('runtime.js'));
                        setTimeout(() => {
                            this.container.appendChild(this.createModuleScriptTag('main.js'));
                        });
                    }
                    quizRoot.addEventListener(RegisteredElementsType, (e) => {
                        resolve(e.detail);
                    }, { once: true });
                }
            });
        }
        createModuleScriptTag(fileName) {
            const script = document.createElement('script');
            script.src = `${this.quizBasePath}${fileName}?ck=${encodeURIComponent(location.origin)}`;
            script.type = 'module';
            return script;
        }
    }
    console.debug('Quiz - Teaser init');
    const conId = `quiz_6278`;
    const currentScript = document.currentScript;
    const container = currentScript.parentElement;
    container.id = conId;
    container.style.margin = '0 auto var(--z-ds-space-54)';
    const teaser = new Teaser({
        quizHeadline: `Wissenstest des Tages`,
        quizDateStr: '27.04.2024',
        firstQuestionText: `In welcher Altersgruppe werden in Deutschland am häufigsten Schwangerschaften abgebrochen?`,
        ctaButtonLabel: 'Quiz starten',
        backgroundSrc: `https://quiz.zeit.de//assets/images/quiz_teaser_bg.jpg`,
    });
    container.style.maxWidth = `${teaser.MAX_WIDTH}px`;
    const launcher = new QuizAppLauncher(container, '6278', 'https://quiz.zeit.de/', 'disabled');
    function engage() {
        launcher.engage(teaser.element).then(() => {
            console.debug('Quiz Element initialized!');
        });
    }
    function hashChangeHandler() {
        const hashFragment = window.location.hash.substring(1);
        if (hashFragment === conId) {
            engage();
        }
    }
    addEventListener('hashchange', hashChangeHandler);
    teaser.ctaEventListener = () => {
        engage();
        history.pushState(null, null, `#${conId}`);
    };
    container.appendChild(teaser.element);
    hashChangeHandler();
})();
//# sourceMappingURL=embedWithTeaser.js.map