import * as PIXI from 'pixi.js';
import Stats from 'stats.js';
import * as PIXIFilters from 'pixi-filters';

let enabledGodray = true;
let enabledShadows = true;

function setupFilters(app, sp) {
    const sFilters = [];
    const spFilters = [];

    if(enabledGodray) {
        const filter = new PIXIFilters.GodrayFilter({
            time: 0,
            gain: .5,
            lacunarity: 2.5,
            alpha: 1,
            parallel: true,
            angle: 30,
            center: { x: 0, y: 0 }
        });

        filter.isGoodray = true;
        sFilters.push(filter);
    }

    if(enabledShadows) {
        const shadow = new PIXIFilters.DropShadowFilter({
            blur: 0, quality: 5, alpha: .5,
            offset: { x: 4, y: 7 }, color: '#000000'
        });

        spFilters.push(shadow);
    }

    app.stage.filters = sFilters;
    sp.filters = spFilters;
}

function render(app) {
    (app.stage.filters || []).forEach(filter => {
        if (filter && filter.isGoodray) {
            filter.time += 0.005;
        }
    });
}

async function boot() {
    const element = document.querySelector('.render');
    const stats = new Stats();
    const app = new PIXI.Application({
        width: 1366,
        height: 768,
        backgroundColor: '0xffffff',
        resolution: 1,
        antialias: true
    });

    element.append(stats.dom);
    stats.showPanel(0);
    element.appendChild(app.view);
    const sp = await new PIXI.Sprite(await PIXI.Assets.load('game_assets/players/anim/turtle4/10.png', () => { }));
    const scale = Math.min(200 / sp.width, 200 / sp.height);

    sp.scale.set(scale, scale);
    sp.position.set(0, (app.renderer.height - sp.height) / 2);
    const rect = new PIXI.Graphics();
    rect.lineStyle(0);
    rect.beginFill(0xffffff, .6);
    rect.drawRect(0, 0, app.renderer.width, app.renderer.height);

    app.stage.addChild(rect, sp);
    setupFilters(app, sp);

    let direction = 'right';
    const animationFrame = () => {
        stats.begin();

        render(app);
        const bounds = sp.getBounds();
        if (bounds.width + bounds.x >= app.renderer.width) {
            direction = 'left';
        } else if (bounds.x <= 0) {
            direction = 'right';
        }

        sp.position.x += 3 * (direction == 'left' ? -1 : 1);
        sp.angle += 5;
        sp.pivot.set(sp.width / 2, sp.height / 2);
        stats.end();
        requestAnimationFrame(animationFrame);
    };

    requestAnimationFrame(animationFrame);

    document.querySelector('[name="godray"]').addEventListener('click', e => {
        enabledGodray = e.target.checked;
        setupFilters(app, sp);
    });

    document.querySelector('[name="shadows"]').addEventListener('click', e => {
        enabledShadows = e.target.checked;
        setupFilters(app, sp);
    });
}

boot();