<template>
  <div>
    <div
      class="video-form"
      v-if="!isVimeo && !isYoutube && !isSrf">
      <info-icon class="video-form__help-icon help-text__icon"/>
      <p class="video-form__help-description help-text__description">
        Sie können Videos auf <a
          class="video-form__platform-link help-text__link"
          href="https://youtube.com/"
          target="_blank">Youtube</a>
        oder <a
          class="video-form__platform-link help-text__link"
          href="https://vimeo.com/"
          target="_blank">Vimeo</a>
        hochladen und anschliessen einen Link hier einfügen.
      </p>

      <input
        :value="value.url"
        class="video-form__video-link skillbox-input"
        placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        @input="$emit('video-change-url', $event.target.value, index)">
    </div>

    <div v-if="isYoutube">
      <youtube-embed :url="value.url"/>
    </div>
    <div v-if="isVimeo">
      <vimeo-embed :url="value.url"/>
    </div>
    <div v-if="isSrf">
      <srf-embed :url="value.url"/>
    </div>

  </div>
</template>

<script>
  import InfoIcon from '@/components/icons/InfoIcon';
  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
  import VimeoEmbed from '@/components/videos/VimeoEmbed';
  import SrfEmbed from '@/components/videos/SrfEmbed';
  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';

  export default {
    props: ['value', 'index'],

    components: {
      InfoIcon,
      YoutubeEmbed,
      VimeoEmbed,
      SrfEmbed
    },

    computed: {
      isYoutube() {
        return isYoutubeUrl(this.value.url);
      },
      isVimeo() {
        return isVimeoUrl(this.value.url);
      },
      isSrf() {
        return isSrfUrl(this.value.url);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";

  .video-form {
    display: grid;
    grid-auto-rows: auto;
    grid-template-columns: 40px 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 20px;
    align-items: center;

    &__help-icon {

    }

    &__help-description {

    }

    &__platform-link {
      font-family: $sans-serif-font-family;
      text-decoration: underline;
      font-weight: $font-weight-regular;
      font-size: toRem(17px);
    }

    &__video-link {
      grid-column: 1 / span 2;
      width: $modal-input-width
    }
  }
</style>
