const Phaser = require('phaser');

const {
    TEXT,
    COLOURS,
    POSITIONS: { ITEM_LIST },
} = require('./constants');

const X = ITEM_LIST.x();
const Y = ITEM_LIST.y();
const WIDTH = ITEM_LIST.width();
const HEIGHT = ITEM_LIST.height();
const ITEM_WIDTH = WIDTH * 0.3;
const ITEM_HEIGHT = HEIGHT * 0.1;

const itemCheckHitbox = (scenePlugin, pointer) => {
    const { list } = scenePlugin.get('MenuCrypList').children;
    const hitboxes = list.filter(c => c.cryp);

    let found;

    for (let i = 0; i < hitboxes.length; i += 1) {
        if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(),
            pointer.position)) {
            found = hitboxes[i];
        } else {
            hitboxes[i].itemDeselect();
        }
    }

    return found;
};

class Item extends Phaser.GameObjects.Container {
    constructor(scene, item, x, y) {
        super(scene, x, y);

        this.state = 'deselect';
        this.item = item;
        this.scene = scene;

        this.origX = x;
        this.origY = y;

        this.box = scene.add
            .rectangle(0, 0, ITEM_WIDTH, ITEM_HEIGHT, 0x222222);

        this.text = scene.add
            .text(0, 0, item.action, TEXT.HEADER)
            .setOrigin(0.5, 0.5);

        this.add(this.box);
        this.add(this.text);

        this.setSize(ITEM_WIDTH, ITEM_HEIGHT);
        this.setInteractive();
    }

    clickHandler() {
        this.scene.activeItem = this;
        this.select();
    }

    select() {
        this.scene.children.list.forEach((item) => {
            if (item.state === 'select') item.deselect();
        });
        this.box.setFillStyle(COLOURS.SELECT);
        this.state = 'select';
    }

    activate() {
        this.scene.children.list.forEach((item) => {
            if (item.state === 'select') item.deselect();
        });
        this.box.setFillStyle(0xff0000);
        this.state = 'activate';
    }

    deselect() {
        this.box.setFillStyle(0x222222);
        this.state = 'deselect';
    }
}

class ItemList extends Phaser.Scene {
    constructor() {
        super({ key: 'ItemList', active: true });
    }

    updateData(parent, key) {
        if (key === 'itemList') {
            this.scene.restart();
        }
    }

    create() {
        const itemList = this.registry.get('itemList');
        const ws = this.registry.get('ws');

        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);

        this.registry.events.on('changedata', this.updateData, this);
        this.registry.events.on('setdata', this.updateData, this);

        if (!itemList) return false;
        
        this.add.text(WIDTH / 4, HEIGHT / 4, 'Inventory', TEXT.HEADER);
        itemList.forEach((item, i) => {
            const ITEM_X = ITEM_WIDTH;
            const ITEM_Y = ITEM_HEIGHT * 1.2 * i + HEIGHT / 2.5;

            const itemBox = new Item(this, item, ITEM_X, ITEM_Y);
            this.input.setDraggable(itemBox);
            this.add.existing(itemBox);
        });

        this.input.on('dragstart', (pointer, box) => {
            box.clickHandler();
        });

        this.input.on('drag', (pointer, box, dragX, dragY) => {
            const hitBox = itemCheckHitbox(this.scene, pointer);
            if (hitBox) hitBox.itemSelect();
            box.setPosition(dragX, dragY);
        });

        this.input.on('dragend', (pointer, box) => {
            box.deselect();
            const hitBox = itemCheckHitbox(this.scene, pointer);
            if (hitBox) {
                ws.sendItemUse(box.item.id, hitBox.cryp.id);
            }
            box.setPosition(box.origX, box.origY);
        });

        return this;
    }

    cleanUp() {
        this.registry.events.off('changedata', this.updateData, this);
        this.registry.events.off('setdata', this.updateData, this);
        this.scene.remove();
    }
}

module.exports = ItemList;