#include animate.js
#include easings.js
#include rng.js

const MamiForceDisconnectNotice = function(banInfo) {
    const message = (() => {
        if(banInfo.perma)
            return 'You have been banned till the end of time, please try again in a different dimension';
        if(banInfo.until)
            return `You were banned until ${banInfo.until.toLocaleString()}`;
        return 'You were kicked, refresh to log back in';
    })();

    let marqueeElem;
    const html = <div class="baka">
        <div class="baka-container">
            <div class="baka-duration">
                <div class="baka-duration-inner">{message}</div>
            </div>
            {marqueeElem = <div class="baka-marquee"></div>}
        </div>
        <div class="baka-bottom"/>
    </div>;

    const marqueeString = banInfo.type === 'kick' ? 'Kicked' : 'Banned';
    for(let i = 0; i < 30; ++i)
        marqueeElem.append(<div class="baka-marquee-text">{marqueeString}</div>);

    const rng = new MamiRNG;
    const rotate = rng.next(-20, 20);
    let sfxBuf, bgmSrc;

    const pub = {
        getElement: () => html,
        onViewPush: async () => {
            try {
                sfxBuf = await mami.sound.library.loadBuffer('touhou:pichuun');
            } catch(ex) {
                sfxBuf = undefined;
            }

            try {
                bgmSrc = await mami.sound.library.loadSource('touhou:th10score');
                bgmSrc.setLoop(true, 10.512, 38.074);
            } catch(ex) {
                bgmSrc = undefined;
            }
        },
        onViewPop: async () => {
            try {
                bgmSrc?.stop();
            } catch(ex) {}
            bgmSrc = sfxBuf = undefined;
        },
        getViewTransition: mode => {
            if(mode === 'push')
                return ctx => MamiAnimate({
                    async: true,
                    duration: (sfxBuf?.duration ?? 1.4) * 1000,
                    start: () => {
                        if(sfxBuf !== undefined)
                            mami.sound.audio.createSource(sfxBuf).play();

                        ctx.toElem.style.top = '-100%';
                    },
                    update: t => {
                        const tOutBounce = MamiEasings.outBounce(t);
                        ctx.toElem.style.top = `${-100 + (tOutBounce * 100)}%`;

                        const tOutExpo = MamiEasings.outExpo(t);
                        ctx.fromElem.style.transform = `scale(${1 - (1  * tOutExpo)}) rotate(${rotate * tOutExpo}deg)`;
                        ctx.fromElem.style.filter = `grayscale(${tOutExpo * 100}%)`;
                    },
                    end: () => {
                        bgmSrc?.play();
                        ctx.toElem.style.top = null;
                        ctx.fromElem.style.transform = null;
                        ctx.fromElem.style.filter = null;
                    },
                });

            if(mode === 'pop')
                return ctx => MamiAnimate({
                    async: true,
                    duration: (sfxBuf?.duration ?? 1.4) * 1000,
                    start: () => {
                        bgmSrc?.stop();
                        if(sfxBuf !== undefined)
                            mami.sound.audio.createSource(sfxBuf, true).play();

                        ctx.toElem.style.transform = `scale(1) rotate(${rotate}deg)`;
                        ctx.toElem.style.filter = 'grayscale(100%)';
                    },
                    update: t => {
                        const tOutBounce = MamiEasings.inBounce(t);
                        ctx.fromElem.style.top = `${tOutBounce * -100}%`;

                        const tOutExpo = MamiEasings.inExpo(t);
                        ctx.toElem.style.transform = `scale(${1  * tOutExpo}) rotate(${rotate - (rotate * tOutExpo)}deg)`;
                        ctx.toElem.style.filter = `grayscale(${100 - (tOutExpo * 100)}%)`;
                    },
                    end: () => {
                        ctx.fromElem.style.top = null;
                        ctx.toElem.style.transform = null;
                        ctx.toElem.style.filter = null;
                    },
                });
        },
    };

    return pub;
};
