<template>
    <section v-if="selectedDate && selectedDate !== 'new'" class="class-selection-section">
        <div class="participants-class-filter">
            <label>
                {{ $t('tournaments.showClass') }}:
                <select :value="normalizedValue" @change="handleChange" class="class-filter-select">
                    <option value="__all__">{{ $t('tournaments.allClasses') }}</option>
                    <option v-for="classItem in tournamentClasses" :key="classItem.id" :value="classItem.id">
                        {{ classItem.name }} ({{ classItem.isDoubles ? $t('tournaments.doubles') : $t('tournaments.singles') }})
                    </option>
                    <option value="__none__">{{ $t('tournaments.withoutClass') }}</option>
                </select>
            </label>
        </div>
    </section>
</template>

<script>
export default {
    name: 'TournamentClassSelector',
    props: {
        modelValue: {
            type: [Number, String, null],
            default: null
        },
        tournamentClasses: {
            type: Array,
            required: true
        },
        selectedDate: {
            type: [String, Number],
            default: null
        }
    },
    emits: ['update:modelValue'],
    computed: {
        normalizedValue() {
            if (this.modelValue === null || this.modelValue === undefined || this.modelValue === '' || this.modelValue === '__all__') {
                return '__all__';
            }
            return this.modelValue;
        }
    },
    methods: {
        handleChange(event) {
            const value = event.target.value;
            if (value === '__all__') {
                this.$emit('update:modelValue', null);
                return;
            }
            if (value === '__none__') {
                this.$emit('update:modelValue', '__none__');
                return;
            }
            this.$emit('update:modelValue', value === '' ? null : Number(value));
        }
    }
};
</script>
