<template>
	<v-card tile outlined :class="{ 'card--reduced': isCardReduced }"> 
		<v-card-title class="card__title primary" @click="toggleCardSize">   
		<v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>   
		Solution </v-card-title> 
		<v-container class="text-center" v-if="currentQuestion">
            <div class="text-h6 mb-2">Question {{ currentQuestionIndex + 1 }}</div>
            <div class="text-body-1 font-weight-bold mb-4">{{ currentQuestion.QuestionText }}</div>
            
            <v-divider class="mb-4"></v-divider>
            
            <v-btn 
                :color="showSolution ? 'red' : 'green'" 
                class="mb-4"
                @click="showSolution = !showSolution"
            >
                {{ showSolution ? 'Masquer Solution' : 'Voir Solution' }}
            </v-btn>

            <v-slide-y-transition>
                <div v-if="showSolution" class="solution-block">
                    <div class="text-h5 success--text mb-2">{{ currentQuestion.MasterData.CorrectAnswer }}</div>
                    <div class="text-body-2 grey--text text--lighten-1 mb-2">
                        <v-icon small>mdi-information</v-icon> {{ currentQuestion.MasterData.MasterNotes }}
                    </div>
                     <div class="text-body-2 info--text">
                        <v-icon small>mdi-help-circle</v-icon> {{ currentQuestion.MasterData.Help }}
                    </div>
                </div>
            </v-slide-y-transition>

		</v-container>
        <v-container v-else class="text-center">
            <div class="text-caption">Aucun quiz chargé ou fin du quiz.</div>
        </v-container>
	</v-card>
</template>
<style>
@media (min-width: 1024px) {
	.image-container { 
		width: 300px; overflow: hidden; /* Pour masquer le dépassement de l'image */ 
		border: 1px solid #ccc; /* Bordure de l'image */
	}
	.image-container img { 
		width: 100%; /* Pour remplir complètement le conteneur */ 
		height: auto; /* Pour maintenir le ratio d'aspect de l'image */ 
		display: block; /* Pour éviter l'espace réservé pour les images */
	}
	}
	.card--reduced { 
		height: 56px; /* Réglez la hauteur réduite selon vos besoins */ 
		width: 160px; 
		overflow: hidden; 
		transition: height 0.6s ease-in-out;
	}
</style>

<script setup>
	import { ref, computed } from 'vue';
    import quizStore from '@/store/quizStore';

	// Variable pour contrôler l'état de la carte
	const isCardReduced = ref(false);
    const showSolution = ref(false);

	// Méthode pour basculer l'état de la carte
	function toggleCardSize() { 
		isCardReduced.value = !isCardReduced.value;
	}

    const currentQuestion = quizStore.getters.currentQuestion;
    const currentQuestionIndex = quizStore.getters.currentQuestionIndex;
</script>