"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const ImagePreview_1 = __importDefault(require("./ImagePreview"));
const ImageGroup_1 = require("./ImageGroup");
const _mixins_1 = require("../../_mixins");
const imageProps = {
    alt: String,
    height: [String, Number],
    imgProps: Object,
    objectFit: {
        type: String,
        default: 'fill'
    },
    previewSrc: String,
    width: [String, Number],
    src: String,
    showToolbar: { type: Boolean, default: true },
    onError: Function
};
exports.default = (0, vue_1.defineComponent)({
    name: 'Image',
    props: imageProps,
    inheritAttrs: false,
    setup(props) {
        const imageRef = (0, vue_1.ref)(null);
        const imgPropsRef = (0, vue_1.toRef)(props, 'imgProps');
        const previewInstRef = (0, vue_1.ref)(null);
        const imageGroupHandle = (0, vue_1.inject)(ImageGroup_1.imageGroupInjectionKey, null);
        const { mergedClsPrefixRef } = imageGroupHandle || (0, _mixins_1.useConfig)(props);
        const exposedMethods = {
            click: () => {
                const mergedPreviewSrc = props.previewSrc || props.src;
                if (imageGroupHandle) {
                    imageGroupHandle.setPreviewSrc(mergedPreviewSrc);
                    imageGroupHandle.setThumbnailEl(imageRef.value);
                    imageGroupHandle.toggleShow();
                    return;
                }
                const { value: previewInst } = previewInstRef;
                if (!previewInst)
                    return;
                previewInst.setPreviewSrc(mergedPreviewSrc);
                previewInst.setThumbnailEl(imageRef.value);
                previewInst.toggleShow();
            }
        };
        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
            imageRef, imgProps: imgPropsRef }, exposedMethods);
    },
    render() {
        const { mergedClsPrefix, imgProps = {} } = this;
        const imgWrapperNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
            role: 'none',
            class: `${mergedClsPrefix}-image`
        }), (0, vue_1.h)("img", Object.assign({}, imgProps, { class: this.groupId, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.onError, style: { objectFit: this.objectFit }, "data-preview-src": this.previewSrc || this.src })));
        return this.groupId ? (imgWrapperNode) : ((0, vue_1.h)(ImagePreview_1.default, { clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar }, {
            default: () => imgWrapperNode
        }));
    }
});
