﻿<script setup>

import {computed, reactive, onMounted} from 'vue';
import {time_ago} from "@/internal_time_ago.js";
import MessageList from "@/views/messages/MessageList.vue";
import PostMessage from "@/views/messages/PostMessage.vue";

import YoutubePlayer from './YoutubePlayer.vue';
import ImageViewer from './ImageViewer.vue';
// import VimeoPlayer from '@/components/VimeoPlayer.vue';
// import AudioPlayer from '@/components/AudioPlayer.vue';
// import BlogViewer from '@/components/BlogViewer.vue';

const props = defineProps({
  content: {
    type: Object,
    required: true,
  }
});

const hasUrls = computed(() => !!props.content.urls && props.content.urls.length > 0);


const messages = reactive([]);

function addMessage(newMessage) {
  messages.unshift(newMessage)
}

function getComponent(url) {
  if (url.includes('youtube.com') || url.includes('youtu.be')) {
    return YoutubePlayer;
    // } else if (url.includes('vimeo.com')) {
    //   return VimeoPlayer;
  } else if (url.match(/\.(jpeg|jpg|gif|png)$/)) {
    return ImageViewer;
    // } else if (url.match(/\.(mp3|wav|ogg)$/)) {
    //   return 'AudioPlayer';
    // } else {
    //   return 'BlogViewer';
  }
}

</script>

<template>
  <div class="shadow-md rounded-lg bg-gray-50">

    <v-card
        outlined
        tile
    >
      <v-card-title>
        {{ props.content.title }}
        <span class="text-subtitle-2">
          {{ time_ago(props.content.createdAt) }}
        </span>
      </v-card-title>

      <v-carousel v-if="hasUrls">

        <v-carousel-item
            v-for="url in props.content.urls"
            :key="url"
        >
          <component :is="getComponent(url)"
                     :src="url"
          ></component>
        </v-carousel-item>

      </v-carousel>

      <v-card-text>
        {{ props.content.description }}
      </v-card-text>

      <v-card-actions>
        <router-link :to="'content/' + content.id">
          <div class="bg-blue-500 rounded-lg py-1 px-2">Plus ...</div>
        </router-link>
      </v-card-actions>

    </v-card>

    <div>

      <div>
        <h2 class="font-sans font-semibold">Commentaires</h2>
        <message-list :subject-id="props.content.id" :messages="messages">
        </message-list>
      </div>

      <div class="border-t-2 border-gray-300 mt-4 pt-4">
        <post-message :subject-id="props.content.id" @message-posted="addMessage">
        </post-message>
      </div>

    </div>

  </div>

</template>