<template>
    <v-col cols="12">
        <v-container>
            <v-card style="border-radius: 30px" elevation="10">
                <v-card-text>
                    <v-row>
                        <!-- Boutons de sélection -->
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('title')">
                                <v-icon>mdi-format-title</v-icon>
                            </v-btn>
                        </v-col>
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('text')">
                                <v-icon>mdi-text</v-icon>
                            </v-btn>
                        </v-col>
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('image')">
                                <v-icon>mdi-image</v-icon>
                            </v-btn>
                        </v-col>
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('video')">
                                <v-icon>mdi-video</v-icon>
                            </v-btn>
                        </v-col>
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('audio')">
                                <v-icon>mdi-volume-high</v-icon>
                            </v-btn>
                        </v-col>
                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
                            <v-btn elevation="0" icon @click="selectType('comments')">
                                <v-icon>mdi-comment</v-icon>
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-card-text>

                <!-- 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">
                            <v-btn icon @click="removeContent(index)" class="remove-button">
                                <v-icon>mdi-close</v-icon>
                            </v-btn>
                        </v-col>
                    </v-row>
                </v-card-text>

                <!-- Boutons Post, Preview et Cancel -->
                <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
                    <v-col class="d-flex justify-end" style="margin-right: 4%;">
                        <v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
                            elevation="4">Post</v-btn>
                        <v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
                            elevation="5">Preview</v-btn>
                        <v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
                    </v-col>
                </v-row>
            </v-card>
        </v-container>
    </v-col>
</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-btn {
    margin-top: 10px;
    margin-bottom: -15px;
}

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