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

import Storage from "../Storage";

export default class ControlsSettings extends Phaser.Scene {

    constructor() {
        super({
            key: "ControlsSettings",
            pixelArt: true
        });
    }

    create() {
        this.controls = Storage.get().controls;

        console.log(this.controls);

        let gridTable = this.rexUI.add.gridTable({
                x: this.cameras.main.centerX,
                y: this.cameras.main.centerY,
                height: this.cameras.main.height,
                width: this.cameras.main.width,

                scrollMode: 0,
                background: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, 0x7777ff),

                table: {
                    cellHeight: 80,
                    columns: 2,
                    mask: {
                        padding: 2,
                    },

                    reuseCellContainer: true
                },

                slider: {
                    track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, 0x777777),
                    thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, 0xcccccc)
                },

                header: this.rexUI.add.label({
                    height: 40,
                    orientation: 0,
                    background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0, 0x777777),
                    text: this.add.text(0, 0, 'Controls')
                }),

                space: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 10,

                    table: 10,
                    header: 10,
                    footer: 10,
                },

                createCellContainerCallback: (cell, cellContainer) => {
                    let width = cell.width,
                        height = cell.height,
                        item = cell.item,
                        index = cell.index;

                    if (cellContainer === null) {
                        cellContainer = this.rexUI.add.label({
                            width: width,
                            height: height,

                            orientation: 0,
                            background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, 0x777777),
                            icon: undefined,
                            text: this.add.text(0, 0, ''),
                            space: {
                                icon: 10,
                                left: 15,
                                top: 0
                            },
                        });

                    }

                    cellContainer.setMinSize(width, height);
                    cellContainer.getElement('text').setText(item[1].name + ": < " + this.getKeyById(item[1].bind) + " >");
                    // cellContainer.getElement('icon').setFillStyle(0xffffff);
                    cellContainer.getElement('background').setStrokeStyle(2, 0x777777).setDepth(0);

                    cellContainer.data = item;

                    return cellContainer;
                },

                items: Object.entries(this.controls),
            }).layout()
            // .drawBounds(this.add.graphics(), 0xff0000)
        ;

        gridTable
            .on('cell.up', (cell, index, p) => {
                if (this.listen)
                    return;

                this.listen = cell.data[0];

                cell.getElement('background')
                    .setStrokeStyle(2, 0xff0000)
                    .setDepth(1);

                cell.getElement('text').setText(cell.data[1].name + ": < ??? >");
            })
            .on('cell.over', (cell, index, p) => {
                cell.getElement('background')
                    .setStrokeStyle(2, 0xcccccc)
                    .setDepth(1);
            })
            .on('cell.out', (cell, index, p) => {
                cell.getElement('background')
                    .setStrokeStyle(2, 0x777777)
                    .setDepth(0);
            });


        this.input.keyboard.on('keydown', e => {
            if (this.listen === undefined)
                return;

            this.controls[this.listen].bind = e.keyCode;

            let config = Storage.get();

            config.controls = this.controls;

            Storage.set(config);

            this.controls = Storage.get().controls;

            gridTable
                .setItems(Object.entries(this.controls))
                .scrollToBottom();

            this.listen = undefined;
        });


    }

    getKeyById(id) {
        return Object.keys(Phaser.Input.Keyboard.KeyCodes).find(k => Phaser.Input.Keyboard.KeyCodes[k] === id);
    }
}