<template>
    <component v-if="!asChild" :is="as" :class="cx('root')" :type="as === 'BUTTON' ? 'button' : undefined" data-action="zoom-toggle" @click="onClick" v-bind="ptmi('root')">
        <slot :zoomed="zoomed" />
    </component>
    <slot v-else :class="cx('root')" :onClick="onClick" :zoomed="zoomed" />
</template>

<script>
import BaseGalleryZoomToggle from './BaseGalleryZoomToggle.vue';

export default {
    name: 'GalleryZoomToggle',
    extends: BaseGalleryZoomToggle,
    inheritAttrs: false,
    inject: ['$pcGallery'],
    methods: {
        onClick() {
            this.$pcGallery?.onClickAction(this.zoomed ? 'zoomOut' : 'zoomIn');
        }
    },
    computed: {
        zoomed() {
            return this.$pcGallery?.activeItemTransform?.zoomed ?? false;
        }
    }
};
</script>
