﻿<template>

  <div v-if="creator.id === userStore.getCurrentUser().id">

    <button
        class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
        @click="isDialogActive = true">
      <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
    </button>

    <v-dialog v-model="isDialogActive" max-width="500">

      <v-card class="text-center rounded-xl">

        <v-card-title class="text-white p-4 rounded-t"
                      :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
          Quicky
        </v-card-title>


        <v-card-text>

          <v-text-field v-model="title"
                        class="p-2"
                        label="Titre"
                        density="comfortable"
                        variant="outlined"
                        hide-details
                        clearable>
          </v-text-field>

          <v-textarea v-model="message"
                      label="Écrivez votre message ici..."
                      class="p-2"
                      density="comfortable"
                      variant="outlined"
                      hide-details
                      clearable
                      outlined>
          </v-textarea>

          <v-file-input v-model="files"
                        label="Ajoutez des fichiers"
                        class="p-2"
                        outlined
                        multiple
                        dropzone
                        placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
          ></v-file-input>

        </v-card-text>

        <v-card-actions class="justify-end">
          <v-btn color="secondary" @click="cancelPost">Annuler</v-btn>
          <v-btn color="primary" @click="publishPost">Publier</v-btn>
        </v-card-actions>

      </v-card>

    </v-dialog>

  </div>

</template>

<script setup>
import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
import {useUserStore} from '@/stores/user.js';

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

const userStore = useUserStore();

const isDialogActive = ref(false);
const title = ref('');
const message = ref('');
const files = ref([]);

const client = useClient();

const publishPost = async () => {

  try {
    await client.post(
        `/api/contents/`,
        {
          "title": title.value,
          "description": message.value
        })

    closeDialog()
  } catch (error) {
    console.error(error)
  }
}

const cancelPost = () => {
  closeDialog()
}

const closeDialog = () => {
  isDialogActive.value = false
  title.value = ''
  message.value = ''
  files.value = []
}

</script>

