#include common.js
#include rng.js

const MamiDomainTransition = function(onImport, onDismiss) {
    if(typeof onImport !== 'function')
        throw 'onImport must be a function';
    if(typeof onDismiss !== 'function')
        throw 'onDismiss must be a function';

    let eggsTarget;
    const html = <div class="domaintrans">
        <div class="domaintrans-body">
            <div class="domaintrans-domain domaintrans-domain-main">
                <div class="domaintrans-domain-header">
                    Flashii Chat
                </div>
                <div class="domaintrans-domain-display">
                    <div class="domaintrans-domain-text domaintrans-domain-orig">sockchat.flashii.net</div>
                    <div class="domaintrans-domain-arrow domaintrans-domain-arrow-right"><i class="fas fa-arrow-right" /></div>
                    <div class="domaintrans-domain-arrow domaintrans-domain-arrow-down"><i class="fas fa-arrow-down" /></div>
                    <div class="domaintrans-domain-text domaintrans-domain-new">chat.flashii.net</div>
                </div>
            </div>
            <div class="domaintrans-domain domaintrans-domain-compat">
                <div class="domaintrans-domain-header">
                    Compatibility Chat
                </div>
                <div class="domaintrans-domain-display">
                    <div class="domaintrans-domain-text domaintrans-domain-orig">sockchat.flashii.net/legacy</div>
                    <div class="domaintrans-domain-arrow domaintrans-domain-arrow-right"><i class="fas fa-arrow-right" /></div>
                    <div class="domaintrans-domain-arrow domaintrans-domain-arrow-down"><i class="fas fa-arrow-down" /></div>
                    <div class="domaintrans-domain-text domaintrans-domain-new">sockchat.flashii.net</div>
                </div>
            </div>
            {eggsTarget = <div class="domaintrans-eggs" />}
            <div class="domaintrans-text">
                <p>At long last, chat is being moved back to its original subdomain. What was meant to be a temporary drop-in lasted a little bit longer than expected!</p>
                <p>You will need to transfer your settings using the compatibility client. Going there will present you with a similar pop-up that will let you save your settings to a file, press "Import Settings" below and select the file you saved to copy them over. If you're new or wish to start anew, just press "Continue to chat".</p>
                <p>This screen won't show up again after you press "Continue to chat".</p>
            </div>
            <div class="domaintrans-options">
                <a class="domaintrans-option" href={AMI_URL} target="_blank">
                    <div class="domaintrans-option-icon"><i class="fas fa-arrow-circle-right" /></div>
                    <div class="domaintrans-option-text">Open compatibility client</div>
                </a>
                <button class="domaintrans-option" onclick={onImport}>
                    <div class="domaintrans-option-icon"><i class="fas fa-arrow-circle-right" /></div>
                    <div class="domaintrans-option-text">Import settings</div>
                </button>
                <button class="domaintrans-option" onclick={onDismiss}>
                    <div class="domaintrans-option-icon"><i class="fas fa-arrow-circle-right" /></div>
                    <div class="domaintrans-option-text">Continue to chat</div>
                </button>
            </div>
        </div>
    </div>;

    const soundRNG = new MamiRNG();
    const soundNames = [];
    mami.getSoundLibrary().forEachSound((info, name) => soundNames.push(name));

    const playRandomSound = () => mami.playLibrarySound(soundNames[soundRNG.next(soundNames.length)]);

    for(let i = 0; i < 10; ++i)
        eggsTarget.appendChild(<i class="fas fa-egg fa-3x" onclick={() => playRandomSound()} />);

    return {
        getElement: () => html,
    };
};
