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

  <div class="flex">
    <q-btn
      color="primary"
      icon="pin"
      label="Increment Store"
      @click="setCounter"
    />
  </div>
  <div class="flex">
    {{ user?.unuaNomo?.enhavo }} <q-space /><span class="text-h4 text-red"
      >{{ counter }}
    </span>
    <q-space />
    {{ user?.objId }}
  </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';
export default {
  name: 'PhaserGame',

  setup() {
    function initScene({ container }) {
      //функция создаёт текстовый объект из массива строк, и устанавливает слежение за вычисляемым элементом, если он есть в массиве
      function phaserVueReactive(textArr) {
        let obj;
        let text = '';
        //итерируем массив, чтобы обнаружить вычисляемый элемент, и объединяем элементы в строку
        for (let i = 0; i < textArr.length; i++) {
          //вычисляемый элемент - объект
          if (typeof textArr[i] === 'object') {
            //устанавливаем слежение за вычисляемым свойством
            watch(textArr[i], (newValue) => {
              if (newValue) {
                //если значение изменилось, то обновляем текст объекта
                obj.setText(
                  textArr
                    .map((i) => {
                      //тут просто привожу вычисляемый элемент к простому тексту
                      return i.value ? i.value : i;
                    })
                    .join(''),
                );
              }
            });
            text += textArr[i].value;
          } else {
            text += textArr[i];
          }
        }
        //создаём объект и возвращаем его
        obj = this.add.text(0, 0, `${text}`, {
          font: '32px Arial',
          fill: '#ffffff',
        });
        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 counter = computed(() => state.counter);
            //используя функцию создаём текстовый объект. передаём в него куски строки в виде массива
            const first = phaserVueReactive.call(this, [
              'Привет, ',
              state.user?.unuaNomo?.enhavo,
              '!',
              counter,
              ' ',
              state.user?.objId,
              '\nкликни по канвасу',
              '\nПроверка работы реактивности',
              '\nПри клике на канвас \nсрабатывает счётчик в pinia',
            ]);

            first.setOrigin(0.5, 0.5);
            first.x = this.cameras.main.width / 2;
            first.y = this.cameras.main.height * 0.2;
            //при клике на канвас срабатывает счётчик в pinia
            this.input.on('pointerdown', () => {
              state.setCounter();
            });
          },
        },
      };

      new Phaser.Game(config);
    }

    const state = useCurrentUserStore();

    const container = ref(null);

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

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

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