﻿<template>

  <div class="flex flex-column">

    <div class="h-full bg-yellow p-2 rounded-2xl m-4">
      <post-content-menu></post-content-menu>
    </div>

    <div class="flex flex-column m-4 gap-4">
      <v-form>
        <v-file-input
            v-model="selectedFile"
            label="Choisisez votre contenu"
            accept="image/*"
            prepend-icon="mdi-camera"
            @change="onFileSelected"
        ></v-file-input>
        
        <v-img
            v-if="url"
            :src="url"
            max-height="375"
            contain
        ></v-img>
        
        <v-text-field
            v-model="title"
            density="comfortable"
            variant="outlined"
            label="Titre"
            hide-details
            clearable>
        </v-text-field>

        <v-text-field
            v-model="description"
            density="comfortable"
            variant="outlined"
            label="Description"
            hide-details
            clearable>
        </v-text-field>

      </v-form>

    </div>

    <div class="flex flex-row gap-2 p-2 justify-end">
      <v-btn style="border-radius: 20px" variant="text">Canceller</v-btn>
      <v-btn style="border-radius: 20px" @click="publish">Publier</v-btn>
    </div>

  </div>

</template>

<script setup>
// import posts from "@/views/posts/posts.json";

import {useClient} from '@/plugins/api.js';
import {ref} from 'vue';
import PostContentMenu from "@/views/contents/PostContentMenu.vue";

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

const client = useClient()

const selectedFile = ref("")
const url = ref("")
const title = ref("")
const description = ref("")

const onFileSelected = () => {
  if (selectedFile.value) {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(selectedFile.value);
    fileReader.onload = () => {
      url.value = fileReader.result;
    };
  }
};

const publish = async () => {
  const response = await client.post(
      `/api/contents/`,
      {
        "url": url.value,
        "title": title.value,
        "description": description.value
      })  

  if (response.status !== 200) {
    console.info(`Content created!`)
  } else {
    console.error(`Failed to create content ${response.data}`)
  }
}


</script>