import Phaser from 'phaser'
import PageTurn from './page-turn'

import Portada from './cinematics/portada'

import Intro1 from './cinematics/intro1'
import Intro2 from './cinematics/intro2'
import Intro3 from './cinematics/intro3'
import Intro4 from './cinematics/intro4'
import Intro5 from './cinematics/intro5'

import Outro1 from './cinematics/outro1'
import Outro2 from './cinematics/outro2'
import Outro3 from './cinematics/outro3'

import ContraPortada from './cinematics/contraportada'


export default class Cinematic extends Phaser.Group {
    constructor(game, parent, name) {
        super(game, parent, name);

        this.create();

        this.x += 24;
        this.y += 16;
        this.scale.setTo(0.95);

        this.originalX = this.x;
        this.originalY = this.y;

        this.startGoreMode = false;

        this.game.myEvents.onBeginOutro.add(() => {
            this.startCinematic(this.outro);
        }, this);

        this.game.myEvents.onGameInputBegin.add(() => {
            this.game.add.tween(this.scale).to({ x: 1.2, y: 1.2 }, 350, Phaser.Easing.Quadratic.Out, true);
            this.game.add.tween(this).to({ x: "-96", y: "-64" }, 350, Phaser.Easing.Quadratic.Out, true);
            this.game.add.tween(this).to({ alpha: 0 }, 350, null, true);
        }, this);

        this.game.myEvents.onBeginOutro.add(() => {
            this.game.add.tween(this.scale).to({ x: 0.95, y: 0.95 }, 350, Phaser.Easing.Quadratic.Out, true);
            this.game.add.tween(this).to({ x: this.originalX, y: this.originalY }, 350, Phaser.Easing.Quadratic.Out, true);
            this.game.add.tween(this).to({ alpha: 1 }, 350, null, true);

            this.startGoreMode = true;

            this.startCinematic(this.outro);
        }, this);

        this.startCinematic(this.intro);
    }

    create() {
        // create the screen from the last to the first, for the 
        this.intro = [
            new Intro5(this.game, this, "intro5"),
            new Intro4(this.game, this, "intro4"),
            new Intro3(this.game, this, "intro3"),
            new Intro2(this.game, this, "intro2"),
            new Intro1(this.game, this, "intro1"),
            new Portada(this.game, this, "portada")
        ];

        this.outro = [
            new ContraPortada(this.game, this, "contraportada"),
            new Outro3(this.game, this, "outro3"),
            new Outro2(this.game, this, "outro2"),
            new Outro1(this.game, this, "outro1")
        ];

        //tutti gli outro sono invisibili all'inizio

        this.intro = this.intro.reverse();
        this.outro = this.outro.reverse();

        this.marco = game.add.sprite(480, 320, 'marco');
        this.marco.anchor.setTo(0.5);
        this.add(this.marco);

        this.pageTurn = new PageTurn(this.game, this, "PageTurn");
        this.add(this.pageTurn);

        //creo la maschera che uso per tagliare i gruppi
        this.pageMask = this.game.add.graphics(0, 0);
        this.add(this.pageMask);

        this.pageTurn.onTurnedPage.add(this.nextScreen, this);
    }

    update() {
        super.update();
        this.drawMask();
    }

    drawMask() {
        this.pageMask.clear();
        this.pageMask.beginFill("0xffffff", 0);
        this.pageMask.drawRect(0, 0, this.pageTurn.pageX, 690);
    }

    startCinematic(screenList) {


        this.screenIndex = 0;
        this.currentCinematic = screenList;

        this.pageTurn.start();

        this.changeScreen();
    }

    nextScreen() {
        this.screenIndex++;
        if (this.screenIndex == this.currentCinematic.length) {
            if (this.currentScreen)
                this.currentScreen.hide();
            this.cinematicEnd();
        }
        else {
            this.changeScreen();
        }
    }

    cinematicEnd() {
        if (this.startGoreMode)
            this.game.myEvents.onStartGore.dispatch();
        // else
            this.game.myEvents.onCinematicEnd.dispatch();
            
        this.currentScreen = null;
        this.pageTurn.stop();
    }

    changeScreen() {
        //rendo visibile la pagina dietro
        if (this.screenIndex + 1 < this.currentCinematic.length) {
            this.currentCinematic[this.screenIndex + 1].visible = true;
        }

        let newScreen = this.currentCinematic[this.screenIndex];


        if (this.currentScreen) {
            this.currentScreen.hide();
        }
        newScreen.show();

        this.drawMask();
        newScreen.mask = this.pageMask;


        this.currentScreen = newScreen;
    }
}
