@props([
    'categories',
    'categoriesWithTypes',
    'selectedCategory' => null,
    'selectedType' => null,
    'period' => 30,
])

@php
    $categoryOptions = collect($categories);
    $categoryTypeOptions = collect($categoriesWithTypes)
        ->map(fn ($category) => [
            'id' => (string) data_get($category, 'id'),
            'types' => collect(data_get($category, 'activityTypes', []))
                ->map(fn ($type) => [
                    'id' => (string) data_get($type, 'id'),
                    'name' => data_get($type, 'name'),
                ])
                ->values()
                ->all(),
        ])
        ->values()
        ->all();
@endphp

<form
    method="GET"
    action="{{ route('statistics.index') }}"
    class="statistics-filter-bar"
    x-data="{
        categoryId: @js((string) data_get($selectedCategory, 'id', '')),
        typeId: @js((string) data_get($selectedType, 'id', '')),
        categories: @js($categoryTypeOptions),
        types() {
            return this.categories.find(category => category.id === this.categoryId)?.types || []
        },
        syncType() {
            if (! this.types().some(type => type.id === this.typeId)) {
                this.typeId = ''
            }
        }
    }"
    x-init="$nextTick(() => syncType())"
>
    <label class="statistics-filter-bar__field">
        <span>{{ __('Catégorie') }}</span>
        <select name="category_id" class="module-input" x-model="categoryId" x-on:change="syncType()">
            <option value="">{{ __('Toutes les catégories') }}</option>
            @foreach ($categoryOptions as $category)
                <option value="{{ data_get($category, 'id') }}">{{ data_get($category, 'name') }}</option>
            @endforeach
        </select>
    </label>

    <label class="statistics-filter-bar__field">
        <span>{{ __('Type d’activité') }}</span>
        <select name="type_id" class="module-input" x-model="typeId" x-bind:disabled="categoryId === ''">
            <option value="" x-bind:selected="typeId === ''" x-text="categoryId === '' ? @js(__('Choisis d’abord une catégorie')) : @js(__('Tous les types'))"></option>
            <template x-for="type in types()" :key="type.id">
                <option :value="type.id" x-bind:selected="type.id === typeId" x-text="type.name"></option>
            </template>
        </select>
    </label>

    <label class="statistics-filter-bar__field statistics-filter-bar__field--period">
        <span>{{ __('Période') }}</span>
        <select name="period" class="module-input">
            @foreach ([7, 30, 90] as $periodOption)
                <option value="{{ $periodOption }}" @selected((int) $period === $periodOption)>{{ trans_choice('ui.common.days', $periodOption, ['count' => $periodOption]) }}</option>
            @endforeach
        </select>
    </label>

    <div class="statistics-filter-bar__actions">
        <a href="{{ route('statistics.index') }}" class="dashboard-action dashboard-action--secondary">{{ __('Réinitialiser') }}</a>
        <button type="submit" class="dashboard-action dashboard-action--primary">{{ __('Filtrer') }}</button>
    </div>
</form>