﻿<template>
  <div class="flex flex-column">
    <div class="flex flex-row p-1 items-center">
      <div class="px-2 content-center">
        <img :src="message.profileImageUrl ?? '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
             alt="Profile Image"
             class="rounded-full"
             width="32px"
             height="32px">
      </div>

      <div class="p-2 flex-1">
        <div class="flex justify-between items-center">

          <div>
             
            <span class="font-semibold font-sans mr-2">
              {{ message.createdByName }}
            </span>

            <v-tooltip :text="new Date(message.createdAt).toLocaleString()">
              <template v-slot:activator="{ props }">
                <span v-bind="props" class="text-sm-caption text-gray-700">
                  {{ time_ago(message.createdAt) }}
                </span>
              </template>
            </v-tooltip>

          </div>
          <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn variant="plain" icon v-bind="props">
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </template>
            <v-list>
              <v-list-item @click="editMessage(message)">
                <v-list-item-title>Edit</v-list-item-title>
              </v-list-item>
              <v-list-item @click="deleteMessage(message)">
                <v-list-item-title>Delete</v-list-item-title>
              </v-list-item>
              <v-list-item @click="reportMessage(message)">
                <v-list-item-title>Report</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>

        <div class="font-sans">
          {{ message.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import {defineProps} from "vue"
import {time_ago} from "@/internal_time_ago.js";

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


function editMessage(message) {
  // Logic for editing the message
  console.log('Edit message', message);
}

function deleteMessage(message) {
  // Logic for deleting the message
  console.log('Delete message', message);
}

function reportMessage(message) {
  // Logic for reporting the message
  console.log('Report message', message);
}
</script>

<style scoped>
.content-center {
  display: flex;
  align-items: center;
}
</style>
