<template>
  <div ref="container"></div>

<div class="flex">    <q-btn
    color="primary"
    icon="pin"
    label="Increment Store"
    @click="setCounter"
  />
  <q-space />
  <q-btn color="primary" icon="closed_caption_off" label="+ d" @click="text += 'd'" />
</div>
<div class="flex">  {{ user?.unuaNomo?.enhavo }}  <q-space />
{{ counter }}  <q-space />
{{ user?.objId }}  <q-space />
{{ text }}
</div>

<!-- Ниже показан пример интернационализации. Текст сообщения на разных языках хранится в папке i18n -->
<div class="flex">
  <q-btn color="primary" icon="language" :label="$i18n.locale.slice(0,2)" @click="$i18n.locale =='ru'?$i18n.locale ='en':$i18n.locale ='ru'" />
  <q-space /> {{ $t('message42') }} <q-space />
</div>
</template>

<script>
import { useCurrentUserStore } from 'src/stores/current-user';
import { mapActions, mapState } from 'pinia';
import { computed, ref, onMounted, watch } from 'vue';
import { Phaser } from '../boot/phaser.js';

//FIXME: Нужно изучить вопрос подключения плагина. Сейчас, если его просто импортировать, то он не видит Phaser, соответственно приложение падает с ошибкой. То же самое происходит и при подключении непосредственно в экземпляр Phaser через preload из удалённого репозитория в виде скрипта

//FIXME: пробовал передать Phaser в глобальный объект window. Почти без изменений. В нём не хватает некоторых методов. Нужно понять почему.

export default {
  name: 'PhaserGame',

  setup() {
    function initScene({
      container,

      text,
      callbackText,

      counter,
      callbackCounter,
    }) {
      function phaserVueReactive(text, callback) {
        const obj = this.add.text(0, 0, `${text}`, {
          font: '32px Arial',
          fill: '#ffffff',
        });
        if (callback) {
          callback.value = obj;
        }
        return obj;
      }

      const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        parent: container,
        scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH,
        },
        scene: {
          preload: () => {
            return true;
          },
          create() {
            this.cameras.main.setBackgroundColor('#abcdef');

            let parent = this.sys.game.canvas.parentElement;
            let parentWidth = parent.offsetWidth;
            let parentHeight = parent.offsetHeight;
            console.log(parent, parentWidth, parentHeight);

            const first = phaserVueReactive.call(
              this,
              `Привет, ${state.user?.unuaNomo?.enhavo}!${counter} ${state.user?.objId}`
            );
            const second = phaserVueReactive.call(
              this,
              `Привет из Pinia! ${counter}`,
              callbackCounter
            );
            const third = phaserVueReactive.call(this, text, callbackText);

            first.setOrigin(0.5, 0.5);
            second.setOrigin(0.5, 0.5);
            third.setOrigin(0.5, 0.5);

            first.x = second.x = third.x = this.cameras.main.width / 2;

            first.y = this.cameras.main.height * 0.2;
            second.y = this.cameras.main.height * 0.5;
            third.y = this.cameras.main.height * 0.8;
          },
        },
      };

      new Phaser.Game(config);
    }

    const state = useCurrentUserStore();

    const container = ref(null);

    const text = ref('Привет из Vue!');
    const callbackText = ref(null);

    const counter = computed(() => state.counter);
    const callbackCounter = ref(null);

    onMounted(() => {
      initScene({
        container: container.value,

        text: text.value,
        callbackText: callbackText,

        counter: counter.value,
        callbackCounter: callbackCounter,
      });
    });

    watch(text, (newValue) => {
      if (callbackText.value) {
        callbackText.value.setText(newValue);
      }
    });

    watch(counter, (newValue) => {
      if (callbackCounter.value) {
        callbackCounter.value.setText(`Привет из Pinia! ${newValue}`);
      }
    });

    return {
      user: state.user,
      container,
      text,
      callbackText,
      counter,
      callbackCounter,
    };
  },
  computed: {
    ...mapState(useCurrentUserStore, ['getUserId']),
  },

  methods: {
    ...mapActions(useCurrentUserStore, ['setCounter']),
  },
};
</script>
