<script setup lang="ts">
/**
 * @file CategorySidebar.vue
 * @description Sidebar for filtering courses by category
 */

const props = defineProps<{
  categories: any[];
  modelValue: number[]; // selectedCategoryIds
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: number[]): void;
}>();

const showAllCategories = ref(false);

const getLocalizedText = (text: any) => {
    if (!text) return ''
    if (typeof text === 'string') return text
    return text.th || text.en || ''
}
</script>

<template>
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <q-expansion-item
            expand-separator
            :label="`หมวดหมู่ (${modelValue.length})`"
            class="font-bold text-slate-900"
            header-class="bg-white"
            text-color="slate-900"
            :header-style="{ color: '#0f172a' }"
            default-opened
        >
            <q-list class="bg-white border-t border-slate-200">
                <q-item
                v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
                :key="cat.id"
                tag="label"
                clickable
                v-ripple
                dense
                >
                <q-item-section avatar>
                    <q-checkbox 
                    :model-value="modelValue"
                    @update:model-value="(val) => emit('update:modelValue', val)"
                    :val="cat.id" 
                    color="primary" 
                    dense
                    class="checkbox-visible"
                    />
                </q-item-section>
                <q-item-section>
                    <q-item-label class="text-sm font-medium text-slate-900">{{ getLocalizedText(cat.name) }}</q-item-label>
                </q-item-section>
                </q-item>

                <!-- Show More/Less Button -->
                <q-item
                v-if="categories.length > 4"
                clickable
                v-ripple
                @click="showAllCategories = !showAllCategories"
                class="text-blue-600 font-bold text-sm"
                >
                <q-item-section>
                    <div class="flex items-center gap-1">
                        {{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="showAllCategories ? 'rotate-180' : ''">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </div>
                </q-item-section>
                </q-item>
            </q-list>
        </q-expansion-item>
    </div>
</template>
