import { Application, Assets, Container, Sprite, Rectangle } from "pixi.js";
import {
    makeDragable,
    backgroundLayout,
    getIntersection,
    makeUnDragable,
} from "../common";
import { Game } from "./game";

class DropZone {
    constructor(sprite) {
        this.sprite = sprite;
        this.full = false;
    }

    drop(bottle) {
        if (!this.full) {
            this.full = true;
            bottle.x = this.sprite.x;
            bottle.y = this.sprite.y;
        }
    }
}

export class Fridge extends Game {
    constructor() {
        super();

        this._bottleCount = 6;
        this._bottlePlaced = 0;

        const fridgeContainer = new Container();
        fridgeContainer.layout = { width: "50%" };
        const fridge = Sprite.from("frigo");
        fridge.layout = backgroundLayout;
        fridgeContainer.addChild(fridge);

        const bottleContainer = new Container();
        bottleContainer.layout = {
            width: "50%",
            flexDirection: "row",
            flexWrap: "wrap",
        };
        const crate = Sprite.from("mate_caisse");
        crate.layout = backgroundLayout;
        bottleContainer.addChild(crate);

        this.gameContainer.addChild(fridgeContainer);
        this.gameContainer.addChild(bottleContainer);

        const bottles = [];
        this._dropZones = [];

        const widthPercent = 0.12;
        this.gameContainer.on("layout", (event) => {
            const layoutBox = event.computedLayout;
            for (const bottle of bottles) {
                const width = layoutBox.width * widthPercent;
                bottle.width = width;
                bottle.height = width; // aspectRatio = 1
                if (bottle.x + bottle.width > layoutBox.width) {
                    bottle.x = layoutBox.width - bottle.width;
                }
                if (bottle.y + bottle.height > layoutBox.height) {
                    bottle.y = layoutBox.height - bottle.height;
                }
            }

            let i = 0;
            for (const zone of this._dropZones) {
                const width = layoutBox.width * (widthPercent + 0.01);
                zone.sprite.width = width;
                zone.sprite.height = width; // aspectRatio = 1
                zone.sprite.x = i * width;
                zone.sprite.y = 0;
                i++;
            }
        });

        for (let i = 0; i < this._bottleCount; i++) {
            const sprite = Sprite.from("clubmate_grey");
            this._dropZones.push(new DropZone(sprite));
            this.gameContainer.addChild(sprite);

            sprite.x = 0;
            sprite.y = 0;
        }

        for (let i = 0; i < this._bottleCount; i++) {
            const newBottle = Sprite.from("clubmate");
            makeDragable(newBottle, (node) => {
                this._onBottleDrop(node);
                if (this._bottlePlaced >= this._bottleCount) {
                    this._win();
                }
            });
            this.gameContainer.addChild(newBottle);
            bottles.push(newBottle);

            newBottle.x = 800;
            newBottle.y = 0;
        }
    }

    reset() {}

    _onBottleDrop(bottle) {
        console.log("dropped at", bottle.position);

        const intersection = new Rectangle();
        for (const dropZone of this._dropZones) {
            getIntersection(
                dropZone.sprite.getBounds(),
                bottle.getBounds(),
                intersection,
            );
            const intersectArea = intersection.width * intersection.height;
            const bottleArea = bottle.width * bottle.height;
            if (intersectArea > 0.5 * bottleArea) {
                if (!dropZone.full) {
                    dropZone.drop(bottle);
                    this._bottlePlaced++;
                    makeUnDragable(bottle); // maybe not needed
                    return;
                }
            }
        }
    }
}