<template>
  <ItemBool
    label="Яндекс.Метрика"
    v-model="settings.items.metrics.yandex_metrika_enabled"
  >
    Задействовать Яндекс.Метрику для Telegram магазина.
  </ItemBool>

  <ItemInput
    label="Номер счётчика Яндекс.Метрика"
    v-model="settings.items.metrics.yandex_metrika_counter"
    placeholder="Вставьте код счётчика Яндекс.Метрики"
  >
    <ButtonGroup>
      <Button
        v-if="settings.items.metrics.yandex_metrika_enabled && settings.items.metrics.yandex_metrika_counter"
        as="a"
        :href="ymCheckUrl"
        target="_blank"
        variant="text"
        :disabled="settings.items.app.app_debug === false"
        v-tooltip.top="'Чтобы проверить интеграцию, включите режим разработчика на вкладке Общие и сохраните настройки.'"
      >
        Проверить интеграцию
      </Button>

      <Button
        as="a"
        href="https://megapay-labs.github.io/docs/analitycs/start/"
        target="_blank"
        variant="text"
      >
        Как получить номер счётчика <i class="fa fa-external-link"></i>
      </Button>
    </ButtonGroup>

  </ItemInput>
</template>

<script setup>
import {useSettingsStore} from "@/stores/settings.js";
import ItemBool from "@/components/Settings/ItemBool.vue";
import ItemInput from "@/components/Settings/ItemInput.vue";
import {Button, ButtonGroup} from 'primevue';
import {computed} from "vue";

const settings = useSettingsStore();

const ymCheckUrl = computed(() => {
  const url = settings.items.telegram.mini_app_url.replace(/#\/$/, '');
  return `${url}?_ym_status-check=${settings.items.metrics.yandex_metrika_counter}&_ym_lang=ru`;
});
</script>
