<!-- Status filter component with all it's data -->
<script setup lang="ts">
import Dropdown from '../navigation/Dropdown.vue';
import IconArrowDown from '../icons/IconArrowDown.vue';
import { DropdownOptionType } from '~src/admin/types';
import { computed, ref, watchEffect } from 'vue';
import { useGettext } from 'vue3-gettext';

// Translations
const { $gettext } = useGettext();

// Emits
const emit = defineEmits<{
    updateActiveStatus: [labels: string[]];
}>();

// Status dropdown options
const statusOptions = ref<DropdownOptionType[]>([
    {
        label: $gettext('Scheduled to be generated'),
        selected: false,
    },
    {
        label: $gettext('Scheduled for publication'),
        selected: false,
    },
    {
        label: $gettext('Published'),
        selected: false,
    },
]);

// Select a status option
const updateStatus = (label: string) => {
    // Change the selected value to opposite
    statusOptions.value.map((option) => {
        if (option.label === label) {
            option.selected = !option.selected;
        }
        return option;
    });
};

defineExpose({
    updateStatus,
});

// Calculate number of selected options
const numberOfSelectedOptions = computed(() => {
    return statusOptions.value.reduce((count, option) => {
        return option.selected ? count + 1 : count;
    }, 0);
});

// Whenever statusOptions changes update the parent component
watchEffect(() => {
    const activeStatus = statusOptions.value.filter((status) => status.selected).map((status) => status.label);
    emit('updateActiveStatus', activeStatus);
});
</script>

<template>
    <Dropdown :options="statusOptions" menu-width="wide" @select-option="(label: string) => updateStatus(label)">
        <div
            class="flex items-center gap-1.5 text-primary-900 group-aria-expanded:text-primary-300 group-hover:text-primary-300"
        >
            <span>
                {{ $gettext('Status') }}
                <span v-if="numberOfSelectedOptions !== 0">{{ `(${numberOfSelectedOptions})` }}</span>
            </span>
            <IconArrowDown class="transition-transform group-aria-expanded:rotate-180 group-hover:rotate-180" />
        </div>
    </Dropdown>
</template>

<style scoped></style>
