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

import { useWeekdayStore } from 'src/stores/useWeekdayStore';

const props = defineProps({
    wdays: {
        type: Array,
        default: () => [],
    },
});

const emit = defineEmits(['update:wdays']);

const weekdayStore = useWeekdayStore();

const selectedWDays = computed({
    get: () => props.wdays,
    set: (value) => emit('update:wdays', value),
});

const toggleDay = (index) => (selectedWDays.value[index] = !selectedWDays.value[index]);
</script>

<template>
    <div class="q-gutter-x-sm" style="width: max-content">
        <QBtn
            v-for="(weekday, index) in weekdayStore.getLocalesMap"
            :key="index"
            :label="weekday.localeChar"
            rounded
            style="max-width: 36px"
            :color="selectedWDays[weekday.index] ? 'primary' : ''"
            @click="toggleDay(weekday.index)"
        />
    </div>
</template>
