<template>
  <div>
    <div
      id="loading-screen"
      style="
        position: absolute;
        width: 100%;
        height: 100%;
        background: white;
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <img src="images/logo.png" alt="Loading..." id="loading-logo" />
    </div>
    <div id="phaser-container"></div>
  </div>
</template>

<script lang="ts">
import 'phaser';
// import 'phaser3-rex-plugins/templates/ui/ui-plugin';
// import 'phaser3-rex-plugins/templates/ui/ui-components';
import CreateScrollablePanel from '../kanbans/CreateScrollablePanel';
import { useKanvasoStore } from 'src/stores/kanvaso';
import { mapActions, mapState } from 'pinia';
// import PreloadScene from './PreloadScene';
// import BootScene from './BootScene';
import { KanvasojKanvaso, TreeNode } from 'src/types/stores/kanvaso';

import { watch, computed } from 'vue';
import { Router, useRouter } from 'vue-router';

declare const window: {
  router: Router;
} & Window;

class EndlessCanvas extends Phaser.Scene {
  [x: string]: any;
  rexUI: any;
  registry: Phaser.Data.DataManager;
  constructor() {
    super({
      key: 'endless-canvas',
    });
    this.store = useKanvasoStore();
    this.router = window.router;
    this.objectFields = [
      'name',
      'isPublished',
      'isDeleted',
      'description',
      'id',
      'type',
      'typeId',
      'parentUuid',
      'hasParent',
    ];
  }

  preload() {
    this.load.scenePlugin(
      'rexuiplugin',
      'rexuiplugin.min.js',
      'rexUI',
      'rexUI',
    );
    this.load.image('icon', 'phaser/stretching_icon.png');
    //заполняем registry объектами холста
    this.store.getMap.forEach((element) => {
      this.registry.set(element.uuid, element);
    });
    // console.log('this.registry :>> ', this.registry);
    //организуем слежение за getMap и в случае его изменения выясняем что изменилось и обновляем данные в registry
    const map = computed(() => this.store.getMap);
    watch(map, (newData, oldData) => {
      newData.forEach((element) => {
        const uuid = element.uuid;
        const oldElement = oldData.filter((el) => el.uuid === uuid)[0];
        this.objectFields.forEach((field) => {
          if (oldElement && element && element[field] !== oldElement[field]) {
            this.registry.set(uuid, element);
          }
        });
      });
      //TODO: На данный момент таким образом можем реализовать только обновление существующих объектов. В случае добавления и удаления нужно дорабатывать метод или применять другие подходы. Например полный рестарт сцены (это очень нехорошо :))
      // Добавляем обработку добавления новых элементов
      newData.forEach((element) => {
        if (!oldData.some((el) => el.uuid === element.uuid)) {
          this.registry.set(element.uuid, element);
        }
      });
      // Добавляем обработку удаления элементов
      oldData.forEach((element) => {
        if (!newData.some((el) => el.uuid === element.uuid)) {
          this.registry.remove(element.uuid);
        }
      });
      //Как обновлять реестр понятно. Не совсем понятно пока как убирать добавлять внутриигровые объекты
    });
  }

  create(): void {
    const back = this.add.text(0, 0, '<<', {
      fontSize: '24px',
      backgroundColor: '#000',
      color: '#fff',
    });
    back.setInteractive();
    back.on('pointerdown', () => {
      this.router.push('/projects');
    });
    this.cameras.main.setBackgroundColor('#abcdef');

    // Скрываем экран загрузки здесь, потому что на этом этапе preload уже завершен
    document.getElementById('loading-screen').style.display = 'none';
    let parent = this.sys.game.canvas.parentElement;
    let parentWidth = parent.offsetWidth;
    let parentHeight = parent.offsetHeight;
    const topPanel = CreateScrollablePanel(
      this,
      this.store.getTree[0],
      this.registry,
      { h: parentHeight, w: parentWidth },
    )
      .setPosition(parentWidth / 2, parentHeight / 2)
      .layout();
    // .drawBounds(this.add.graphics(), 0xff0000)}
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  parent: 'phaser-container',
  width: window.innerWidth,
  height: window.innerHeight,

  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: EndlessCanvas,
  plugins: {
    // scene: [
    //   {
    //     key: 'rexUI',
    //     //@ts-ignore
    //     plugin: RexPlugins,
    //     mapping: 'rexUI',
    //   },
    //   // ...
    // ],
  },
};

export default {
  name: 'EndlessCanvas',
  data() {
    return {
      wsSubscribe: null,
    };
  },
  computed: {
    ...mapState(useKanvasoStore, {
      project: 'getKanvaso',
    }),
    // ...mapState(useCurrentUserStore, { userId: 'getUserId' }),

    currentProject() {
      return this.project ? this.project[0]?.node : null;
    },
    projectUuid() {
      return this.$route?.params?.uuid || '';
    },
  },

  methods: {
    ...mapActions(useKanvasoStore, [
      'onGetKanvasoFull',
      'onEditKanvasoObjekto',
      'onEditKanvaso',
      'onEditKanvasoLigilo',
      'onGetKanvasoObjekto',
      'onKanvasoSubscribe',
    ]),
  },
  async mounted() {
    interface KanvasojKanvasoResult {
      data?: {
        kanvasojKanvaso?: KanvasojKanvaso;
      };
    }
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';

    await this.onGetKanvasoFull({ uuid: this.projectUuid })
      .then((result: KanvasojKanvasoResult) => {
        if (!result.data.kanvasojKanvaso.edges.length) {
          throw new Error(result.toString());
        }
        this.onKanvasoSubscribe({
          kanvasoj: [this.currentProject.objId],
        }).then((data: any) => {
          this.wsSubscribe = data;
        });
      })
      .catch((err: any) => {
        console.log('error get kanvaso full :>> ', err);
        this.$router.replace({ name: 'projects' });
      });
    await this.onGetKanvasoObjekto({ kanvaso_Uuid: this.projectUuid });

    const resizeHandler = () => {
      game.scale.resize(window.innerHeight, window.innerWidth);
    };

    window.addEventListener('resize', resizeHandler);
    window.router = this.$router;
    const game = new Phaser.Game(config);
    // window.addEventListener('resize', function (event) {
    //   console.log('resize');
    //   game.scale.resize(
    //     window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
    //     window.innerWidth < 600
    //       ? window.innerHeight - 51
    //       : window.innerHeight - 10,
    //   );
    // });
    // setInterval(() => {
    //   game.scale.resize(
    //     window.innerWidth < 600 ? window.innerWidth : window.innerWidth - 205,
    //     window.innerWidth < 600
    //       ? window.innerHeight - 51
    //       : window.innerHeight - 10,
    //   );
    // }, 100);
  },
  beforeUnmount() {
    this.wsSubscribe.unsubscribe();
    document.getElementsByTagName('body')[0].style.overflow = 'auto';

    delete window.router;
  },
};
</script>
<style>
#phaser-container > canvas {
  margin-top: 0 !important;
}
</style>
