<template>
    <!-- <ul class="d-flex p-0 mb-0 flex-wrap">
        <li class="d-flex">
            <button
                type="button"
                class="alphabet-btn"
                :class="{ active: selectedAl === 'all' }"
                @click="selectAlphabet('all')"
            > 전체 ({{ totalCount }})
            </button>
        </li>
    </ul> -->
    <div v-for="(group, groupIndex) in chunkedKoreanChars" :key="'ko-group-' + groupIndex">
        <ul class="d-flex p-0 mb-0">
            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                <button
                    type="button"
                    class="alphabet-btn"
                    :class="{ active: selectedAl === char.CHARACTER_ }"
                    @click="selectAlphabet(char.CHARACTER_)"
                >
                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                </button>
                <span v-if="index !== group.length - 1" class="divider">|</span>
            </li>
        </ul>
    </div>
    <div v-for="(group, groupIndex) in chunkedEnglishChars" :key="'en-group-' + groupIndex">
        <ul class="d-flex p-0 mb-0">
            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                <button
                    type="button"
                    class="alphabet-btn"
                    :class="{ active: selectedAl === char.CHARACTER_ }"
                    @click="selectAlphabet(char.CHARACTER_)"
                >
                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                </button>
                <span v-if="index !== group.length - 1" class="divider">|</span>
            </li>
        </ul>
    </div>
</template>

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

const props = defineProps({
    indexCategory: {
        type: Array,
        required: true,
    },
    selectedAl: {
        type: String,
        default: '',
        required: false,
    },
});

const selectedAlphabet = ref(props.selectedAl);
const totalCount = computed(() => {
    return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
});

const chunkArray = (arr, size) => {
    return arr.reduce((acc, _, i) => {
        if (i % size === 0) acc.push(arr.slice(i, i + size));
        return acc;
    }, []);
};

const koreanChars = computed(() => {
    return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
});
const englishChars = computed(() => {
    return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
});

const chunkedKoreanChars = computed(() => chunkArray(koreanChars.value, 5));
const chunkedEnglishChars = computed(() => chunkArray(englishChars.value, 5));

const emit = defineEmits();
const selectAlphabet = (alphabet) => {
    selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
    emit('update:data', selectedAlphabet.value);
};
</script>

<style scoped>
.alphabet-btn {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: bold;
    color: #6c757d;
    cursor: pointer;
    width: 70%;
    height: 40px;
    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for color */
}

.alphabet-btn:hover {
    color: #0d6efd;
}

.alphabet-btn.active {
    color: #0d6efd;
    text-decoration: underline;
    font-size: 13px; /* Keep font size fixed in active state */
}

.divider {
    color: #bbb;
    font-size: 14px;
    font-weight: bold;
}

.flex-wrap {
    flex-wrap: wrap;
}
</style>
