<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" v-bind="attrs">
        <slot :pageCount="pageCount">
            <CarouselIndicator v-for="i in pageCount" :key="i" :page="i - 1" />
        </slot>
    </component>

    <slot v-else :a11yAttrs="a11yAttrs" :class="cx('root')" :pageCount="pageCount"></slot>
</template>

<script>
import CarouselIndicator from 'primevue/carouselindicator';
import { mergeProps } from 'vue';
import BaseCarouselIndicators from './BaseCarouselIndicators.vue';

export default {
    name: 'CarouselIndicators',
    extends: BaseCarouselIndicators,
    inheritAttrs: false,
    inject: ['$pcCarousel'],
    components: {
        CarouselIndicator
    },
    computed: {
        pageCount() {
            return this.$pcCarousel?.snapPoints?.size || this.$pcCarousel?.totalIndicators || 0;
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                'data-pc-name': 'carouselindicators',
                'data-pc-section': 'root',
                'data-orientation': this.$pcCarousel?.orientation,
                'data-align': this.$pcCarousel?.align,
                'data-page': this.$pcCarousel?.d_page,
                'data-swiping': this.$pcCarousel?.swiping ? '' : undefined,
                onKeydown: this.$pcCarousel?.onIndicatorKeydown
            };
        }
    }
};
</script>
