<template>
    <div class="dropdown-wrapper">
        <div class="dropdown-selected-option" @click="isDropDown=true">
            {{ selectedOption || 'Selectionner état'}}
        </div>
        <div 
            class="option-wrapper"
            v-if="isDropDown"
        >
            <div
                class="All_etats"
                v-for="(etat,index) in props.All_etats"
                :key ="index"
                @click="toggleSelectedOption(etat)"
            >   
                {{ etat }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { defineProps, ref} from "vue";
   
    const props = defineProps ( {
        All_etats: {
            type: Array,
            Required: true,
        },
        modelValue:{
            default: null
        }
    })

    //Emit value to Todos
    const emit=defineEmits(["update:modelValue"])

    const selectedOption = ref (null)

    const toggleSelectedOption = (etat)=> {
        selectedOption.value = etat
        isDropDown.value=false
        emit('update:modelValue',etat)
    }

    //To update automatic dropdown
    const isDropDown = ref(false);

    

</script>

<style>
.dropdown-wrapper{
    padding: 16px;
    cursor: pointer;
    max-width: 200px;
    margin: 0 auto;
}
.dropdown-selected-option{
    padding: 16px;
    border: solid 1px #313131;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.All_etats:hover {
    background: #c5c5c5;
}
.All_etats {
    padding: 16px;
    border: solid 1px #313131;
    box-sizing: border-box;
}

.All_etats:last-of-type{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

</style>