<template>
  <div v-if="isShown" class="toast toast-center toast-bottom-fix z-50">
    <div class="alert alert-info">
      <span>
        Используя магазин, вы соглашаетесь с
        <a v-if="settings.privacy_policy_link"
           href="#" class="underline"
           @click.prevent="showPrivacyPolicy"
        >обработкой персональных данных</a>
        <span v-else>обработкой персональных данных</span>.
      </span>
      <button
          class="btn btn-outline"
          @click="privacyConsent"
      >
        OK
      </button>
    </div>
  </div>
</template>

<script setup>
import {userPrivacyConsent} from "@/utils/ftch.js";
import {ref} from "vue";
import {useSettingsStore} from "@/stores/SettingsStore.js";

const isShown = ref(true);
const settings = useSettingsStore();

async function privacyConsent() {
  isShown.value = false;
  await userPrivacyConsent();
}

function showPrivacyPolicy() {
  if (settings.privacy_policy_link) {
    window.Telegram.WebApp.openLink(settings.privacy_policy_link, {
      try_instant_view: true,
    });
  }
}
</script>

<style scoped>
.toast-bottom-fix {
  bottom: calc(
      var(--dock-height, 0px)
      + var(--tg-content-safe-area-inset-bottom, 0px)
      + var(--tg-safe-area-inset-bottom, 0px)
      + 5px
  );
}
</style>
