<template>
  <div>
    <div id="loading-screen" style="
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        display: none;" :style="{
          background: backgroundColor
        }">
      <img src="sprite/LogoGif.gif" alt="Loading..." id="loading-logo" style="width: 30vw;" />
    </div>
    <div id="phaser-container"></div>
  </div>
</template>

<script lang="ts">
import 'phaser';

import { mapActions, mapState } from 'pinia';
import { useKanvasoStore } from '../../stores/kanvaso';

import { Router } from 'vue-router';
import { KanvasojKanvaso } from '../../types/stores/kanvaso';
import { getPhaserConfig } from './PhaserConfig';

import { EventBus } from '../../boot/eventBus';
import { EndlessCanvas } from './EndlessCanvas';
import { COLOR_BACKGROUND } from '../kanbans/Const';

// import { LoadingAnimation } from './LoadingAnimation';


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

const config = getPhaserConfig([
  EndlessCanvas,
  // LoadingAnimation
]);


export default {
  name: 'EndlessCanvas',
  data() {
    return {
      wsSubscribe: null,
      game: null,
      backgroundColor: `#${COLOR_BACKGROUND.toString(16)}`
    };
  },
  computed: {
    ...mapState(useKanvasoStore, {
      project: 'getKanvaso',
    }),
    currentProject() {
      return this.project ? this.project[0]?.node : null;
    },
    projectUuid() {
      return this.$route?.params?.uuid || '';
    },
  },

  methods: {
    ...mapActions(useKanvasoStore, [
      'onGetKanvasoFull',
      'onEditKanvasoObjekto',
      'onEditKanvaso',
      'onEditKanvasoLigilo',
      'onGetKanvasoObjekto',
      'onKanvasoSubscribe',
    ]),
    resizeHandler() {
      // const container = document.getElementById('phaser-container');
      // container.style.width = `${window.innerWidth}px`;
      // container.style.height = `${window.innerHeight}px`;
      this.game.scale.resize(window.innerWidth, window.innerHeight);
    },
  },
  async mounted() {
    interface KanvasojKanvasoResult {
      data?: {
        kanvasojKanvaso?: KanvasojKanvaso;
      };
    }
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    document.getElementById('loading-screen').style.display = 'flex';


    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 });

    window.addEventListener('resize', this.resizeHandler);
    window.router = this.$router;
    this.game = new Phaser.Game(config);

  },
  beforeUnmount() {
    this.wsSubscribe.unsubscribe();
    document.getElementsByTagName('body')[0].style.overflow = 'auto';
    EventBus.$destroy();
    this.game.destroy();
    delete window.router;
  },
};
</script>
<style>
#phaser-container>canvas {
  margin-top: 0 !important;
}
</style>
