<template>
  <component :is="url ? 'a' : 'div'" :href="url" class="c-teaser">
    <div v-if="videoId" class="c-teaser__video js-teaser-video u-margin-bottom" ref="videoElement">
      <slot name="teaserVideo">
        <div class="youtube-video" :data-video="videoId"></div>
        <div class="c-teaser__video-modal-trigger js-modal-trigger js-video-modal-trigger" data-target="#videoModal"
          :data-video-type="videoType" :data-video="videoId">
          <span class="c-teaser__video-modal-trigger-icon icon-play-circle"></span>
        </div>
      </slot>
    </div>
    <div v-if="imageUrl"
      :class="['u-margin-bottom', getModifiersClass('c-teaser__image', modifiers), imageWidth ? 'c-teaser__image--width-custom' : 'c-teaser__image--full-width']">
      <div v-if="imageUrl" class="c-teaser__image-container">
        <slot name="teaserImage">
          <img :src="imageUrl" :width="imageWidth" :alt="alternativeText" />
        </slot>
      </div>
    </div>
    <div class="c-teaser__inner">
      <span v-if="preHeading" class="c-teaser__pre-heading">{{ preHeading }}</span>
      <h3 :class="getModifiersClass('c-teaser__heading', modifiers)">
        {{ heading }}
      </h3>
      <div class="c-teaser__text">
        <slot />
      </div>
      <ul v-if="$slots.teaserActions" class="c-teaser__actions">
        <slot name="teaserActions" />
      </ul>
    </div>
  </component>
</template>

<script setup lang="ts">
import type { ModifierItems } from './teaser.config';
import useComponentModifiers from '../../composable/useComponentModifiers';
import { onMounted, ref } from 'vue';
import Teaser from './teaser';

const { videoId } = defineProps<{
  imageUrl?: string;
  imageWidth?: number;
  imageBackgroundColor?: 'white' | 'light-grey' | 'blue-20';
  preHeading?: string;
  heading?: string;
  text?: string;
  alternativeText?: string;
  url?: string;
  videoId?: string;
  videoType?: string;
  modifiers?: ModifierItems;
}>();

const videoElement = ref<HTMLElement | null>(null);
const { getModifiersClass } = useComponentModifiers();

if (videoId) {
  onMounted(() => {
    // TODO: continue implementing for other video surces than youtube 
    // Teaser only have youtube, maybee BannerVideo and Teaser could be combined?
    // Tekniklyftet do not use the component so no hurry to fix this
    const teaser = new Teaser(document, videoElement.value);
    teaser.loadVideo();
  });
}

</script>
