﻿<template>
  <div class="flex flex-column">
    <div class="flex flex-row items-center ">
      <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
      <div class="flex-grow">
        <div class="flex flex-row bg-gray-100 rounded-2xl">
          <v-textarea
              v-model="value"
              density="compact"
              variant="underlined"
              placeholder="Votre commentaire..."
              hide-details
              auto-grow
              rows="1"
              maxlength="1024"
              class="pr-1 ml-6 flex-grow"
              @keydown.enter.prevent="publish"
              
          >
          </v-textarea>
          <div class="flex flex-col justify-center">
            <v-btn
                icon
                variant="text"
                @click="publish"
            >
              <v-icon>mdi-send</v-icon>
            </v-btn>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end items-center mt-1">
      <div v-if="value.length < 1024" class="text-gray-500 text-sm">{{ value.length }}/1024</div>
      <div v-if="value.length >= 1024" class="text-red-500 text-sm">{{ value.length }}/1024</div>
    </div>
  </div>


  <v-dialog v-model="loginModal" max-width="400">
    <v-card>
      <div class="flex flex-col items-center">
        <v-img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" class="w-50"></v-img>
        <LoginForm :onSuccess="handleSuccess" :onFailure="handleFailure"></LoginForm>
        <v-card-text>Vous devez être connecté pour poster un commentaire.</v-card-text>
      </div>
      <v-card-actions>
        <v-btn color="primary" text @click="closeModal">Fermer</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
import {ref} from 'vue';
import {v7} from 'uuid';
import {useRouter} from "vue-router";
import {useClient} from '@/plugins/api.js';
import {useUserStore} from "@/stores/userStore.js";
import {useAuthStore} from "@/stores/authStore.js";
import LoginForm from "@/views/main/LoginForm.vue";

const closeModal = () => {
  loginModal.value = false;
}

const props = defineProps({
  subjectId: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['message-posted'])

const loginModal = ref(false);
const client = useClient()
const value = ref("")
const router = useRouter()
const userStore = useUserStore()
const authStore = useAuthStore()

const publish = async () => {
  if (!authStore.isAuthenticated) {
    loginModal.value = true;
  } else {
    try {
      const messageId = v7()
      await client.post(`/api/messages/`, {
        "id": messageId,
        "subjectId": props.subjectId,
        "message": value.value
      })
      emit('message-posted', {
        "id": messageId,
        "subjectId": props.subjectId,
        "createdBy": userStore.user.id,
        "createdByName": userStore.alias,
        "createdByPortraitUrl": userStore.portraitUrl,
        "createdAt": new Date(Date.now()).toISOString(),
        "value": value.value,
        "parentId": null
      })
      value.value = ''
    } catch (error) {
      console.error(`post api/message : ${error}`)
    }
  }
}

const handleSuccess = () => {
  loginModal.value = false;
}

const handleFailure = () => {
  console.error('Login failed');
}
</script>

<style scoped>
.text-red-500 {
  color: #f56565;
}

.text-gray-500 {
  color: #a0aec0;
}

.text-sm {
  font-size: 0.875rem;
}

.mt-1 {
  margin-top: 0.25rem;
}
</style>
