<template>
  <ClientOnly>
    <div
      v-if="spot"
      :class="{
        'ntv': isNtv,
      }"
      class="adv-native-card"
    >
      <div
        v-once
        class="adv-native-card__slot"
      >
        <div
          data-asg-ins
          :data-spots="spot"
        />
      </div>
      <div
        v-if="!isNtv"
        class="adv-native-card__bottom"
      >
        <UiImg
          :alt="t('advertising_banner')"
          class="adv-native-card__channel-logo"
          width="32"
          height="32"
          src="/img/user-uploaded.svg"
          sizes="32px"
        />

        <div class="adv-native-card__titles">
          <p class="adv-native-card__secondary">
            {{ t('advertising_banner') }}
          </p>
          <p class="adv-native-card__primary">
            {{ title }}
          </p>
          <p class="adv-native-card__secondary">
            {{ text }}
          </p>
        </div>
      </div>
    </div>
  </ClientOnly>
</template>

<script setup lang="ts">
defineProps<{
  isNtv: boolean;
  spot: number,
}>();

const { t } = useI18n();

const title = ref(t('loading'));
const text = ref(t('loading'));

const freeze = ref(false);

function getBannerTexts() {
  let counter = 0;
  const limit = 50;

  function getBannerTextInner() {
    const titleContainer = document?.querySelector('.exo-native-widget-item-title');
    const textContainer = document?.querySelector('.exo-native-widget-item-text');

    if (counter < limit && !titleContainer && !textContainer) {
      counter++;

      setTimeout(getBannerTextInner, 50);
    } else {
      title.value = titleContainer?.innerHTML || '';
      text.value = textContainer?.innerHTML || '';

      freeze.value = true;
    }
  }

  getBannerTextInner();
}

onMounted(() => {
  getBannerTexts();
});
</script>

<style lang="scss">
.adv-native-card {
  @include video-card;

  overflow: hidden;
  margin-bottom: 300px;
  background-color: $native-card-bg;
}

.adv-native-card__bottom {
  display: grid;
  align-items: start;
  align-content: start;
  grid-template-columns: 32px 1fr;
  gap: 8px;
}

.adv-native-card__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adv-native-card__primary {
  color: $native-card-primary;
}

.adv-native-card__secondary {
  font-size: 12px;
  color: $native-card-secondary;
}

.adv-native-card__slot {
  @include video-card-poster;
}

.ntv .adv-native-card__slot {
  aspect-ratio: 1 / 1;
  width: 300px;
  height: 250px;
  align-self: center;
}

.adv-native-card__slot > div {
  position: absolute;
  inset: 0;
}

.adv-native-card__slot div {
  width: 100% !important;
}
</style>
