<template>
  <div id="phaser-container"></div>
</template>

<script lang="ts">
import 'phaser';
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin';

// Определяем основные цвета для интерфейса
const COLOR_PRIMARY = 0xCCCCCC;
const COLOR_LIGHT = 0x7b5e57;
const COLOR_DARK = 0x444444;

// Функция для генерации случайных чисел
const Random = Phaser.Math.Between;

// Определение основного класса сцены
class Demo extends Phaser.Scene {
    // Определение переменной для вывода текста
    private print: Phaser.GameObjects.Text;

    // Конструктор сцены
    constructor() {
        super({
            key: 'examples', // Уникальный ключ для этой сцены
        });
    }



    // Метод, который вызывается при создании сцены
    create(): void {
      this.cameras.main.setBackgroundColor('#000000');

      // Создание таблицы с ячейками
        const gridTable = this.rexUI.add.gridTable({
            x: 400,
            y: 300,
            width: 500,
            height: 300,

            // Фон таблицы
            background: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_PRIMARY),

            // Параметры таблицы
            table: {
                cellWidth: 120,  // Ширина ячейки
                cellHeight: 60,  // Высота ячейки
                columns: 5,  // Количество колонок

                // Маска для скрытия содержимого за пределами таблицы
                mask: {
                    padding: 2,
                },

                 enableLayer: true, // Включение слоя

                reuseCellContainer: true,  // Переиспользование контейнеров ячеек для оптимизации
            },

            // Параметры горизонтального слайдера
            sliderX: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
            },

            // Параметры вертикального слайдера
            sliderY: {
                track: this.rexUI.add.roundRectangle(0, 0, 20, 10, 10, COLOR_DARK),
                thumb: this.rexUI.add.roundRectangle(0, 0, 0, 0, 13, COLOR_LIGHT),
            },

            // Заголовок таблицы
            header: this.rexUI.add.label({
                background: this.rexUI.add.roundRectangle(0, 0, 20, 20, 0, COLOR_DARK),
                text: this.add.text(0, 0, 'Header'),
            }),

            // Нижний колонтитул таблицы
            // footer: GetFooterSizer(this),

            // Отступы
            space: {
                left: 20,
                right: 20,
                top: 20,
                bottom: 20,

                sliderX: 10,
                sliderY: 10,
                header: 10,
                footer: 10,
            },

            // Функция для создания контейнера ячейки
            createCellContainerCallback: function (cell, cellContainer) {
                var scene = cell.scene,
                    width = cell.width,
                    height = cell.height,
                    item = cell.item,
                    index = cell.index;
                if (cellContainer === null) {
                    cellContainer = scene.rexUI.add.label({
                        width: width,
                        height: height,
                        background: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 0).setStrokeStyle(2, COLOR_DARK),
                        icon: scene.rexUI.add.roundRectangle(0, 0, 20, 20, 10, 0x0),
                        text: scene.add.text(0, 0, ''),

                        space: {
                            icon: 10,
                            left: 10
                        }
                    });
                    console.log(cell.index + ': create new cell-container');
                } else {
                    console.log(cell.index + ': reuse cell-container');
                }

                // Set properties from item value
                cellContainer.setMinSize(width, height); // Size might changed in this demo
                cellContainer.getElement('text').setText(item.id); // Set text of text object
                cellContainer.getElement('icon').setFillStyle(item.color); // Set fill color of round rectangle object
                cellContainer.getElement('background').setStrokeStyle(2, COLOR_DARK).setDepth(0);
                return cellContainer;
            },
            // Элементы, которые будут отображаться в ячейках
            // items: CreateItems(1000)
        })
            .setDraggable('header')  // Делаем заголовок таблицы перетаскиваемым
            .layout() // Применяем макет
            AddDraggableCardsToTable(this, gridTable);

        //.drawBounds(this.add.graphics(), 0xff0000);



    }




}



// Функция для создания элементов таблицы
function AddDraggableCardsToTable(scene: Phaser.Scene, gridTable: any): void {
    const sizer0 = CreatePanel(scene, 12).setPosition(250, 300).layout();
    const sizer1 = CreatePanel(scene, 8).setPosition(400, 300).layout();
    const sizer2 = CreatePanel(scene, 0).setPosition(550, 300).layout();

    const sizers = [sizer0, sizer1, sizer2];
    sizers.forEach((sizer) => {
        sizer.setInteractive({ dropZone: true });
        SetDragable(sizer.getElement('items'));
    });

    // Функция для создания нижнего колонтитула
    const GetFooterSizer = (scene: Phaser.Scene): any => {
    return scene.rexUI.add.sizer()
        .add(
            CreateFooterButton(scene, 'Reset'),   // child
            { proportion: 1 }
        )
        .add(
            CreateFooterButton(scene, 'Exit'),    // child
            { proportion: 1 }
        )
}
}

const CreatePanel = function (scene, itemCount) {
    if (itemCount === undefined) {
        itemCount = 0;
    }

    const sizer = scene.rexUI.add.sizer({
        width: 120, height: 500,
        orientation: 'y',
        space: { left: 6, right: 6, top: 6, bottom: 6, item: 6 },
    })
        .setDepth(-1)
        .addBackground(scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_DARK).setDepth(-1))

        for (let i = 0; i < itemCount; i++) {
    sizer.add(
        CreateLabel(scene, i.toString()),
        {
            expand: true
        }
    );
}
    return sizer;
}

const CreateLabel = function (scene, text) {
    const label = scene.rexUI.add.label({
        background: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
        text: scene.add.text(0, 0, text, {
            fontSize: 18
        }),

        align: 'center',
        space: {
            left: 5,
            right: 5,
            top: 5,
            bottom: 5,
        },

    })
    return label;
}

const SetDragable = function (items) {
    items.forEach(function (item) {
        item
            .setInteractive({ draggable: true })
            .on('dragstart', function (pointer, dragX, dragY) {
                item.setData({ startX: item.x, startY: item.y });
            })
            .on('drag', function (pointer, dragX, dragY) {
                item.setPosition(dragX, dragY);
            })
            .on('dragend', function (pointer, dragX, dragY, dropped) {
                if (dropped) { // Process 'drop' event
                    return;
                }

                item.moveTo({
                    x: item.getData('startX'), y: item.getData('startY'),
                    speed: 300
                });
            })
            .on('drop', function (pointer, target) {
                const parent = item.getParentSizer();
                parent.remove(item);
                ArrangeItems(parent);

                // Item is placed to new position in sizer
                target.insertAtPosition(
                    pointer.x, pointer.y,
                    item,
                    {
                        expand: true
                    }
                );
                // Move item from start position to new position
                ArrangeItems(target);
            })
    });
}

const ArrangeItems = function (panel) {
    const items = panel.getElement('items');
    // Save current position
    items.forEach(function (item) {
        item.setData({ startX: item.x, startY: item.y });
    })
    // Item is placed to new position in sizer
    panel.layout();
    // Move item from start position to new position
    items.forEach(function (item) {
        item.moveFrom({
            x: item.getData('startX'), y: item.getData('startY'),
            speed: 300
        })
    })
}

// Функция для создания кнопок в нижнем колонтитуле
const CreateFooterButton = (scene: Phaser.Scene, text: string): any => {
    return scene.rexUI.add.label({
        background: scene.rexUI.add.roundRectangle(0, 0, 2, 2, 20, COLOR_DARK),
        text: scene.add.text(0, 0, text),
        icon: scene.rexUI.add.roundRectangle(0, 0, 0, 0, 10, COLOR_LIGHT),
        align: 'center',
        space: {
            left: 10, right: 10, top: 10, bottom: 10,
            icon: 10
        }
    })
        .setInteractive()
        .on('pointerdown', function () {
            console.log(`Pointer down ${text}`)
        })
        .on('pointerover', function () {
            this.getElement('background').setStrokeStyle(1, 0xffffff);
        })
        .on('pointerout', function () {
            this.getElement('background').setStrokeStyle();
        })
}

// Конфигурация игры
const config = {
    type: Phaser.AUTO,
    // parent: 'phaser-example',
    width: window.innerWidth,  // или другое значение, которое вы хотите
    height: window.innerHeight,  // или другое значение, которое вы хотите
    parent: 'phaser-container',
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    scene: Demo,
    plugins: {
        scene: [{
            key: 'rexUI',
            plugin: UIPlugin,
            mapping: 'rexUI'
        }]
    },
};

// Создание новой игры с заданной конфигурацией
export default {
  name: 'YourComponentName',
  mounted() {
    var game = new Phaser.Game(config);

    game.events.once('boot', function() {
        game.scene.scenes[0].cameras.main.setBackgroundColor('#FFFFFF');
    });
  }
}


</script>

<style>

</style>
