<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" v-bind="attrs">
        <slot></slot>
    </component>
    <slot v-else :a11yAttrs="a11yAttrs" :class="cx('root')" :active="active" :onClick="onClick"></slot>
</template>

<script>
import { mergeProps } from 'vue';
import BaseCarouselIndicator from './BaseCarouselIndicator.vue';

export default {
    name: 'CarouselIndicator',
    extends: BaseCarouselIndicator,
    inheritAttrs: false,
    inject: ['$pcCarousel'],
    computed: {
        active() {
            return this.$pcCarousel?.d_page === this.page;
        },
        attrs() {
            return mergeProps(this.asAttrs, this.a11yAttrs, this.ptmi('root'));
        },
        asAttrs() {
            return this.as === 'BUTTON' ? { type: 'button' } : undefined;
        },
        a11yAttrs() {
            return {
                'aria-label': this.$pcCarousel?.ariaPageLabel?.(this.page + 1),
                'aria-current': this.active ? 'page' : undefined,
                'data-pc-name': 'carouselindicator',
                'data-pc-section': 'root',
                'data-orientation': this.$pcCarousel?.orientation,
                'data-align': this.$pcCarousel?.align,
                'data-page': this.$pcCarousel?.d_page,
                'data-active': this.active ? '' : undefined,
                'data-swiping': this.$pcCarousel?.swiping ? '' : undefined,
                onClick: this.onClick
            };
        }
    },
    methods: {
        onClick(event) {
            this.$pcCarousel?.scrollToPage(this.page);

            if (event?.cancelable) {
                event.preventDefault();
            }
        }
    }
};
</script>
