#include animate.js

const MamiYouAreAnIdiot = function() {
    const html = <div class="youare">
        <div class="youare-content">
            <div class="youare-text">
                <div class="youare-big">you are an idiot</div>
                <div class="youare-small">!</div>
            </div>
            <div class="youare-smiles">
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
                <div class="youare-smile">☺</div>
            </div>
        </div>
    </div>;

    let soundSrc;

    const pub = {
        getElement: () => html,
        onViewPush: async () => {
            try {
                soundSrc = await mami.sound.library.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;
        },
        pushOn: async views => views.push(pub, 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;
};