#include animate.js

const MamiYouAreAnIdiot = function(sndLibrary, views) {
    const html = <div class="youare">
        <div class="youare-content">
            <div class="youare-text" title="Double click to dismiss!">
                <div class="youare-big">you are an idiot</div>
                <div class="youare-small">!</div>
            </div>
            <div class="youare-smiles" title="Double click to dismiss!">
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
            </div>
        </div>
    </div>;

    if(views !== undefined)
        html.addEventListener('dblclick', () => { views.pop(); });

    let soundSrc;

    const pub = {
        getElement: () => html,
        onViewPush: async () => {
            try {
                soundSrc = await sndLibrary.loadSource('misc:youare');
                soundSrc.setMuted(true);
                soundSrc.setLoop(true, 0.21, 5);
                soundSrc.play();
            } catch(ex) {
                console.error(ex);
            }
        },
        onViewForeground: async () => {
            if(soundSrc !== undefined)
                soundSrc.setMuted(false);
        },
        onViewBackground: async () => {
            if(soundSrc !== undefined)
                soundSrc.setMuted(true);
        },
        onViewPop: async () => {
            if(soundSrc !== undefined)
                soundSrc.stop();
            soundSrc = undefined;
        },
        getViewTransition: mode => {
            if(mode === 'push')
                return ctx => MamiAnimate({
                    async: true,
                    duration: 1500,
                    easing: 'outBounce',
                    start: () => ctx.toElem.style.top = '-100%',
                    update: t => ctx.toElem.style.top = `${-100 + (t * 100)}%`,
                    end: () => ctx.toElem.style.top = null,
                });
        },
    };

    return pub;
};
