<template>
  <div id="phaser-container"></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 './CreateScrollablePanel';

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

class Demo extends Phaser.Scene {
  rexUI: any;

  constructor() {
    super({
      key: 'examples',
    });
  }

  preload() {
    this.load.scenePlugin(
      'rexuiplugin',
      'rexuiplugin.min.js',
      'rexUI',
      'rexUI',
    );

    this.load.image('phaser/stretching_icon1');

  }

  create(): void {

    this.cameras.main.setBackgroundColor('#abcdef');

    //@ts-ignore

    if (window.objekto) {
      //@ts-ignore
      const topPanel = CreateScrollablePanel(this, window.objekto)
        .setPosition(400, 300)
        .layout();
      // .drawBounds(this.add.graphics(), 0xff0000)}
    }

  }

}

const config: Phaser.Types.Core.GameConfig = {

  type: Phaser.AUTO,
  parent: 'phaser-container',
  width: 1280,
  height: 720,
  scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
  },
  scene: Demo,
  plugins: {
    // scene: [
    //   {
    //     key: 'rexUI',

    //     //@ts-ignore
    //     plugin: RexPlugins,

    //     mapping: 'rexUI',
    //   },
    //   // ...
    // ],
  },

};

export default {
  name: 'YourComponentName',

  data() {
    return {
      wsSubscribe: null,
    };
  },
  computed: {
    ...mapState(useKanvasoStore, ['getTree']),
    ...mapState(useKanvasoStore, {
      project: 'getKanvaso',
      kanvasoTree: 'getTree',
    }),
    // ...mapState(useCurrentUserStore, { userId: 'getUserId' }),

    currentProject() {
      return this.project ? this.project[0]?.node : null;
    },
    projectUuid() {
      return this.$route?.params?.uuid || '';
    },
  },
  watch: {
    getTree(val) {
      //@ts-ignore
      window.objekto = val;
    },
  },
  methods: {
    ...mapActions(useKanvasoStore, [
      'onGetKanvasoFull',
      'onEditKanvasoObjekto',
      'onEditKanvaso',
      'onEditKanvasoLigilo',
      'onGetKanvasoObjekto',
      'onKanvasoSubscribe',
    ]),
  },
  async mounted() {
    await this.onGetKanvasoFull({ uuid: this.projectUuid })
      .then((result) => {
        if (result.data.kanvasojKanvaso.edges.length === 0) {
          throw new Error(result);
        }
        this.onKanvasoSubscribe({
          kanvasoj: [this.currentProject.objId],
        }).then((data) => {
          this.wsSubscribe = data;
        });
      })
      .catch((err) => {
        console.log('error get kanvaso full :>> ', err);
        this.$router.replace({ name: 'projects' });
      });
    this.onGetKanvasoObjekto({ kanvaso_Uuid: this.projectUuid });

    const game = new Phaser.Game(config);

  },

  beforeUnmount() {
    this.wsSubscribe.unsubscribe();

    //@ts-ignore
    delete window.objekto;

  },

};

</script>