import { __decorate, __extends } from "tslib";
import Croppie from 'croppie';
import 'croppie/croppie.css';
import EXIF from 'exif-js';
import Component from 'vue-class-component';
import { Emit, Prop } from 'vue-property-decorator';
import UserAgentUtil from '../../../utils/user-agent/user-agent';
import { ModulVue } from '../../../utils/vue/vue';
import { MAvatarSize } from '../../avatar/avatar';
import { MIcon } from '../../icon/icon';
import WithRender from './crop-image.html';
import './crop-image.scss';
window['EXIF'] = EXIF;
var MExportFormat;
(function (MExportFormat) {
    MExportFormat["PNG"] = "png";
    MExportFormat["JPG"] = "jpeg";
})(MExportFormat || (MExportFormat = {}));
var MCropImage = /** @class */ (function (_super) {
    __extends(MCropImage, _super);
    function MCropImage() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.croppie = undefined;
        return _this;
    }
    MCropImage.prototype.mounted = function () {
        if (this.image.url) {
            var el = this.$refs.croppieContainer;
            this.croppie = new Croppie(el, {
                viewport: {
                    width: MAvatarSize.LARGE,
                    height: MAvatarSize.LARGE,
                    type: 'circle'
                },
                enableExif: true,
                boundary: {
                    height: UserAgentUtil.isMobile() ? 200 : 240
                }
            });
            this.bind();
        }
    };
    MCropImage.prototype.beforeDestroy = function () {
        if (this.croppie) {
            this.croppie.destroy();
        }
    };
    MCropImage.prototype.bind = function () {
        if (this.image.url && this.croppie) {
            this.croppie.bind({
                url: this.image.url,
                zoom: 0
            });
        }
    };
    MCropImage.prototype.crop = function () {
        var _this = this;
        if (this.croppie) {
            this.croppie.result({
                format: this.imageExtension,
                type: 'blob',
                circle: false
            }).then(function (imageCropped) {
                _this.emitImageCropped(_this.createImageFile(imageCropped));
            });
        }
    };
    MCropImage.prototype.createImageFile = function (imageCropped) {
        var file = imageCropped;
        file.name = this.image.name;
        return file;
    };
    MCropImage.prototype.emitImageCropped = function (imageCropped) { };
    Object.defineProperty(MCropImage.prototype, "imageExtension", {
        get: function () {
            return this.image.extension === 'png' || this.image.extension === 'gif' ? MExportFormat.PNG : MExportFormat.JPG;
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Prop({ required: true })
    ], MCropImage.prototype, "image", void 0);
    __decorate([
        Emit('image-cropped')
    ], MCropImage.prototype, "emitImageCropped", null);
    MCropImage = __decorate([
        WithRender,
        Component({
            components: { MIcon: MIcon }
        })
    ], MCropImage);
    return MCropImage;
}(ModulVue));
export { MCropImage };
//# sourceMappingURL=crop-image.js.map