/*
 * Copyright (c) 2020. Antonio Martinez Casadesus and Pascal Syma.
 * All rights reserved.
 */

import logoImg from "../../public/favicon.png";
import map from "../assets/lvl1.json";
import menu from "../assets/menu.json";
import skeletonAtlas from "../assets/skeleton.json";
import skeletonSprite from "../assets/skeleton.png";
import charA from "../assets/char_a/spritesheet.png";
import charB from "../assets/char_b/spritesheet.png";
import charC from "../assets/char_c/spritesheet.png";
import charD from "../assets/char_d/spritesheet.png";
import zombie from "../assets/zombie/zombie.png";
import tiles from "../assets/newtiles.png";
import menutiles from "../assets/menu.png";
import buttontiles from "../assets/buttons.png";
import batFly from "../assets/BatFly.png";
import batDie from "../assets/BatDie.png";
import item_01 from "../assets/items/itemshard_01.png";
import item_02 from "../assets/items/itemshard_02.png";
import item_03 from "../assets/items/itemshard_03.png";
import heal from "../assets/items/heal.png";
import slow from "../assets/items/slow.png";
import speed from "../assets/items/speed.png";
import storm from "../assets/items/storm.png";
import heart from "../assets/heart.png";
import chest from "../assets/chest.png";

import menu_click from "../assets/audio/menu_click.wav";
import menu_hover from "../assets/audio/menu_hover.wav";
import background_start from "../assets/audio/background_start.wav";
import background_loop from "../assets/audio/background_loop.wav";
import attack_a from "../assets/audio/attack_a.wav";
import attack_b from "../assets/audio/attack_b.wav";

export default class Preload extends Phaser.Scene {

    constructor() {
        super('Loading');
    }

    preload() {
        this.loadingScreen();
        this.load.image("logo", logoImg);
        this.load.image("item_01", item_01);
        this.load.image("item_02", item_02);
        this.load.image("item_03", item_03);
        this.load.image("heart", heart);
        this.load.spritesheet('charA', charA, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
        this.load.spritesheet('charB', charB, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
        this.load.spritesheet('charC', charC, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
        this.load.spritesheet('charD', charD, {frameWidth: 79, frameHeight: 63, margin: 1, spacing: 2});
        this.load.spritesheet('zombie', zombie, {frameWidth: 43, frameHeight: 55, margin: 1, spacing: 2});
        this.load.spritesheet('tiles', tiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('menutiles', menutiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('buttontiles', buttontiles, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('batFly', batFly, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
        this.load.spritesheet('batDie', batDie, {frameWidth: 48, frameHeight: 32/*, margin: 1, spacing: 2*/});
        this.load.spritesheet('chest', chest, {frameWidth: 32, frameHeight: 32, margin: 1, spacing: 2});
        this.load.spritesheet('heal', heal, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('storm', storm, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('speed', speed, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.spritesheet('slow', slow, {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2});
        this.load.tilemapTiledJSON("map", map);
        this.load.tilemapTiledJSON("menu", menu);

        this.load.atlas({key: 'skeleton', textureURL: skeletonSprite, atlasURL: skeletonAtlas});

        this.load.audio('menu_click', menu_click);
        this.load.audio('menu_hover', menu_hover);
        this.load.audio('background_start', background_start);
        this.load.audio('background_loop', background_loop);
        this.load.audio('attack_a', attack_a);
        this.load.audio('attack_b', attack_b);

    }

    create() {
        this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, 'logo').setOrigin(0.5, 0.5).setDisplaySize(this.cameras.main.centerX, this.cameras.main.centerX);
        setTimeout(() => {
            // this.scene.start('Menu');
            this.scene.start('GUI', {key: 'MainMenu'});
        }, 2 * 1000)

        this.anims.create({
            key: 'idle',
            frames: this.anims.generateFrameNumbers('charA', {start: 126, end: 131}),
            frameRate: 10,
            repeat: -1
        });
    }

    loadingScreen() {
        const progressBar = this.add.graphics();
        const progressBox = this.add.graphics();
        const width = this.cameras.main.width;
        const height = this.cameras.main.height;

        progressBox.fillStyle(0x222222, 0.8);
        progressBox.fillRect(width / 4, height / 2 - 25, width / 2, 50);

        const loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 25 - 20,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });
        loadingText.setOrigin(0.5, 1);

        const percentText = this.make.text({
            x: width / 2,
            y: height / 2,
            text: '0%',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        percentText.setOrigin(0.5, 0.5);

        this.load.on('progress', (value) => {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(width / 4 + 10, height / 2 - 25 + 10, (width / 2 - 20) * value, 50 - 20);
        });

        this.load.on('complete', () => {
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();

        });
    }

}