<template>

  <div class="flow">
    <button @click="selectType('title')">
      <v-icon>mdi-format-title</v-icon>
    </button>

    <button @click="selectType('text')">
      <v-icon>mdi-text</v-icon>
    </button>

    <button @click="selectType('image')">
      <v-icon>mdi-image</v-icon>
    </button>
    <button @click="selectType('video')">
      <v-icon>mdi-video</v-icon>
    </button>

    <button @click="selectType('audio')">
      <v-icon>mdi-volume-high</v-icon>
    </button>

    <button @click="selectType('comments')">
      <v-icon>mdi-comment</v-icon>
    </button>

  </div>

  <!-- Affichage du contenu en fonction du type sélectionné -->
  <!--  <v-card-text>-->
  <!--    <v-row v-for="(content, index) in contents" :key="index" class="draggable-row"-->
  <!--           @dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">-->
  <!--      <v-col cols="10">-->
  <!--        <template v-if="content.type === 'title'">-->
  <!--          <v-text-field v-model="content.value" label="Titre"></v-text-field>-->
  <!--        </template>-->
  <!--        <template v-else-if="content.type === 'text'">-->
  <!--          <v-textarea v-model="content.value" label="Texte"></v-textarea>-->
  <!--        </template>-->
  <!--        <template v-else-if="content.type === 'image'">-->
  <!--          <v-row>-->

  <!--            <v-col cols="12">-->
  <!--              <v-file-input v-model="content.value" label="Image"></v-file-input>-->
  <!--            </v-col>-->
  <!--          </v-row>-->
  <!--        </template>-->
  <!--        <template v-else-if="content.type === 'video'">-->
  <!--          <v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>-->
  <!--        </template>-->
  <!--        <template v-else-if="content.type === 'audio'">-->
  <!--          <v-row>-->
  <!--            <v-col cols="2">-->
  <!--              <v-icon>mdi-volume-high</v-icon>-->
  <!--            </v-col>-->
  <!--            <v-col cols="10">-->
  <!--              <v-file-input v-model="content.value" label="Audio"></v-file-input>-->
  <!--            </v-col>-->
  <!--          </v-row>-->
  <!--        </template>-->
  <!--        <template v-else-if="content.type === 'comments'">-->
  <!--          <v-text-field v-model="content.value" label="Commentaires"></v-text-field>-->
  <!--        </template>-->
  <!--      </v-col>-->
  <!--      <v-col cols="2" class="d-flex justify-center align-center">-->
  <!--        <button icon @click="removeContent(index)" class="remove-button">-->
  <!--          <v-icon>mdi-close</v-icon>-->
  <!--        </button>-->
  <!--      </v-col>-->
  <!--    </v-row>-->
  <!--  </v-card-text>-->

  <!--  &lt;!&ndash; Boutons Post, Preview et Cancel &ndash;&gt;-->
  <!--  <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">-->
  <!--    <v-col class="d-flex justify-end" style="margin-right: 4%;">-->
  <!--      <button style="margin-right: 15px;" @click="postContent" color="white" dark-->
  <!--             elevation="4">Post-->
  <!--      </button>-->
  <!--      <button style="margin-right: 15px;" @click="previewContent" color="white" dark-->
  <!--             elevation="5">Preview-->
  <!--      </button>-->
  <!--      <button @click="cancelPost" color="white" dark elevation="5">Cancel</button>-->
  <!--    </v-col>-->
  <!--  </v-row>-->

</template>

<script setup>
import {ref} from 'vue';

const contents = ref([]);
let dragIndex = null;

const selectType = (type) => {
  console.log("Type sélectionné:", type);
  contents.value.push({type: type, value: ''});
};

const removeContent = (index) => {
  contents.value.splice(index, 1);
};

const postContent = () => {
  // Implémenter la logique pour poster le contenu
};

const previewContent = () => {
  // Implémenter la logique pour prévisualiser le contenu
};

const cancelPost = () => {
  if (contents.value.length > 0) {
    // Réinitialiser le tableau contents pour supprimer tous les contenus
    contents.value = [];
  }
};

const dragStart = (index) => {
  dragIndex = index;
};

const drop = (index) => {
  if (dragIndex !== null && index !== null) {
    const draggedItem = contents.value[dragIndex];
    contents.value.splice(dragIndex, 1);
    contents.value.splice(index, 0, draggedItem);
    dragIndex = null;
  }
};
</script>

<style scoped>
.remove-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20%;
}

.toolbar-button {
  margin-top: 10px;
  margin-bottom: -15px;
}

.draggable-row {
  cursor: grab;
}
</style>