const toast = require('izitoast');

const OK_BUTTON = '<button type="submit">OK</button>';
const NO_MORE_BUTTON = '<button type="submit">Enough already...</button>';

function noMore(instance, thisToast) {
    window.localStorage.setItem('tutorial', 'none');
    return instance.hide({ transitionOut: 'fadeOut' }, thisToast);
}

const WELCOME_MESSAGE = `
Welcome to cryps.gg
Enter a username and password and press register to sign up,
or just press DEMO to quick start.
`;

const HOMEPAGE_MESSAGE = `
This homepage shows your cryps, joinable online games, PVE options and your items.\n
If you have no cryps yet, press SPAWN and give your cryp a name to create one.
Once you have made a cryp, click on them to visit their stat page and teach them some SKILLS.
The stat page also has descriptions of each skill and their effects.
cryps have 3 basic stats: hp, red damage and magic damage.
Toggle whether a cryp is selected for your team by clicking the coloured stripes next to the cryp or press 1,2,3.
Once you have a team ready press the New PVE Game button to start playing.
`;

const SKILL_PHASE_MESSAGE = `
A cryps battle has two main phases. This first phase is called the SKILL PHASE.
Your cryps are positioned on the left, your opponent's are on the right.
In the centre are your cryps' SKILLS, grayed out SKILLS are currently ON COOLDOWN.
A skill's cooldown reduces on every turn that cryp does not use a skill with a cooldown.
For the moment, drag ATTACK onto the opponent team to have your cryps attack them with red damage.
`;

// const TARGET_PHASE_MESSAGE = `
// This phase is the TARGET PHASE.
// In cryps you do not directly attack your opponent's cryps, you attack the opponent as a team
// and you and your opponent choose which cryp is the TARGET of each ability.
// Drag the incoming ATTACKS from the right hand side onto your own cryps.
// It's wise to spread the damage around!
// `;

const RESOLUTION_PHASE_MESSAGE = `
The second phase is called the RESOLUTION PHASE.
This phase happens automatically, every skill is RESOLVED in order of its SPEED.
This is important because attacks only RESOLVE while their caster is still able to use the skill,
a fast skill that does a small amount of damage may KO an opponent cryp, causing any SKILLS
they have used to no longer RESOLVE!
Another example of this is the skill STUN. STUN causes an opponent cryp to be unable to use any
abilities for TWO TURNS including the turn it resolves on. In other words it lasts for the rest of the turn it resolves on
and the whole next turn.
Try it now!
`;

const FINISH_PHASE_MESSAGE = `
gg! The game has now concluded, if you were the winner you have been awarded with a STAT REROLL ITEM.
You can use this to reroll a stat on a cryp which may be lacking.
A good metric is that if a stat is more than 1/2 of its STAMINA that's a good roll.
Now that you have learned the basics, press BACKSPACE to return to the main menu
and experiment with some combinations of SKILLS or replace the ones your cryps know in the STAT PAGE.
glhf!
`;

const STEPS = [
    'init',
    'welcome',
    'homepage',
    'skillPhase',
    // 'targetPhase',
    'resolutionPhase',
    'finishPhase',
    'none',
];

function showTutorial(message, step, nextStep) {
    const existing = document.querySelector(`#${step}`); // Selector of your toast

    if (existing) return false;

    toast.info({
        id: step,
        theme: 'dark',
        color: 'black',
        timeout: false,
        drag: false,
        title: 'TUTORIAL',
        position: 'bottomCenter',
        maxWidth: window.innerWidth / 2,
        close: false,
        buttons: [
            [NO_MORE_BUTTON, noMore],
            [OK_BUTTON, (instance, thisToast) => {
                const thisStep = STEPS.indexOf(step);
                const storageStep = STEPS.indexOf(window.localStorage.getItem('tutorial'));
                if (thisStep >= storageStep) {
                    window.localStorage.setItem('tutorial', nextStep);
                }

                return instance.hide({ transitionOut: 'fadeOut' }, thisToast);
            }],
        ],
        message,
    });

    return true;
}

function tutorial() {
    function show(step) {
        const currentStage = window.localStorage.getItem('tutorial');
        if (currentStage === 'none') {
            return false;
        }

        const thisStep = STEPS.indexOf(step);
        const storageStep = STEPS.indexOf(window.localStorage.getItem('tutorial'));

        if (thisStep < storageStep) return false;

        if (step === 'welcome') return showTutorial(WELCOME_MESSAGE, 'welcome', 'homepage');
        if (step === 'homepage') return showTutorial(HOMEPAGE_MESSAGE, 'homepage', 'skillPhase');
        if (step === 'skillPhase') return showTutorial(SKILL_PHASE_MESSAGE, 'skillPhase', 'targetPhase');
        // if (step === 'targetPhase') return showTutorial(TARGET_PHASE_MESSAGE, 'targetPhase', 'resolutionPhase');
        if (step === 'resolutionPhase') return showTutorial(RESOLUTION_PHASE_MESSAGE, 'resolutionPhase', 'finishPhase');
        if (step === 'finishPhase') return showTutorial(FINISH_PHASE_MESSAGE, 'finishPhase', 'none');

        return true;
    }

    if (window.localStorage.getItem('tutorial') !== 'none') window.localStorage.setItem('tutorial', 'init');

    return show;
}

module.exports = tutorial;