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

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

export default {
    name: 'GalleryThumbnailItem',
    extends: BaseGalleryThumbnailItem,
    inheritAttrs: false,
    inject: ['$pcGallery'],
    methods: {
        onClick() {
            if (this.index === undefined) return;

            this.$pcGallery?.selectItem(this.index);
        }
    },
    computed: {
        active() {
            return this.index !== undefined && (this.$pcGallery?.isItemActive(this.index) ?? false);
        },
        attrs() {
            return mergeProps(this.a11yAttrs, this.ptmi('root'));
        },
        a11yAttrs() {
            return {
                'data-pc-name': 'gallerythumbnailitem',
                'data-pc-section': 'root',
                'data-active': this.active ? '' : undefined,
                onClick: this.onClick
            };
        }
    }
};
</script>
