<template>
  <div ref="videoElement" class="c-video" :data-video-type="videoType">

    <div v-if="videoType === 'video'" class="video__container">
      <!-- Custom play/pause button -->
      <button type="button" class="video__play-button" data-button-state="pause">
        <svg class="video__play-button-icon video__play-button-icon--play" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 140 140">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M70 140L70 140c-38.7 0-70-31.3-70-70l0 0C0 31.3 31.3 0 70 0l0 0c38.7 0 70 31.3 70 70l0 0C140 108.7 108.7 140 70 140z" />
          <polygon fill-rule="evenodd" clip-rule="evenodd" fill="white" points="50.5 41.35 50.5 98.95 97.75 70.2" />
        </svg>
        <svg class="video__play-button-icon video__play-button-icon--pause" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 140 140">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M70 140L70 140c-38.7 0-70-31.3-70-70v0C0 31.3 31.3 0 70 0h0c38.7 0 70 31.3 70 70v0C140 108.7 108.7 140 70 140z" />
          <rect fill-rule="evenodd" clip-rule="evenodd" x="50.6" y="42.55" fill="white" width="13.2" height="57.75" />
          <rect fill-rule="evenodd" clip-rule="evenodd" x="74.8" y="42.55" fill="white" width="13.2" height="57.75" />
        </svg>
      </button>
      <video :src="video" :controls="controls && autoplay" :poster :autoplay :muted="autoplay"
        :data-controls="controls">
      </video>
    </div>
    <div v-else-if="videoType === 'embedded'">
      <iframe :src="video" class="w-100"></iframe>
    </div>
    <div v-else class="video-background">
      <div class="video-foreground">
        <div :class="'video-iframe-content'" :data-video="video" :data-autoplay="autoplay" :data-controls="controls">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, useTemplateRef } from 'vue';
import Video from './video';

// TODO: autoplay dont work
const { videoType = 'video' } =
  defineProps<{
    video: string;
    videoType: 'vimeo' | 'youtube' | 'video' | 'embedded';
    poster?: string;
    autoplay: boolean;
    controls: boolean;
    modifiers?: never;
  }>();

let instance: Video | null;
const videoElement = useTemplateRef("videoElement");

if (videoType === 'youtube' || videoType === 'vimeo' || videoType === 'video') {
  onMounted(() => {
    instance = new Video(videoElement.value);
  });

  onUnmounted(() => {
    instance.destroy();
    instance = null;
  });
}
</script>
