var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Vue, Watch } from 'vue-property-decorator';
import { FormatMode } from '../../utils/i18n/i18n';
import uuid from '../../utils/uuid/uuid';
import { ModulVue } from '../../utils/vue/vue';
import { MButton, MButtonSkin } from '../button/button';
import { BUTTON_NAME, FILE_SELECT_NAME, MODAL_NAME } from '../component-names';
import { MFileSelect } from '../file-select/file-select';
import { MMessage, MMessageState } from '../message/message';
import { MModal, MModalSize } from '../modal/modal';
import { MCropImage } from './crop-image/crop-image';
import { MImageDisplayer } from './image-displayer/image-displayer';
import WithRender from './photo-editor.html?style=./photo-editor.scss';
export var MPhotoEditorMode;
(function (MPhotoEditorMode) {
    MPhotoEditorMode["SELECT"] = "select";
    MPhotoEditorMode["CROP"] = "crop";
})(MPhotoEditorMode || (MPhotoEditorMode = {}));
var MPhotoEditor = /** @class */ (function (_super) {
    __extends(MPhotoEditor, _super);
    function MPhotoEditor() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.i18nChoosePhoto = _this.$i18n.translate('m-photo-editor:choose-photo');
        _this.i18nSave = _this.$i18n.translate('m-photo-editor:save');
        _this.i18nCancel = _this.$i18n.translate('m-photo-editor:cancel');
        _this.modalSize = MModalSize.Small;
        _this.primaryButton = MButtonSkin.Primary;
        _this.secondaryButton = MButtonSkin.Secondary;
        _this.photoEditorMode = MPhotoEditorMode.SELECT;
        _this.messageState = MMessageState.Error;
        _this.imageToCrop = {};
        return _this;
    }
    MPhotoEditor.prototype.initialize = function () {
        this.imageToCrop = {};
        this.photoEditorMode = MPhotoEditorMode.SELECT;
    };
    MPhotoEditor.prototype.replaceImage = function () {
        if (this.imageSelected && this.validFile) {
            this.imageToCrop = this.imageSelected;
            this.imageToCrop.url = URL.createObjectURL(this.imageSelected.file);
            this.photoEditorMode = MPhotoEditorMode.CROP;
        }
    };
    MPhotoEditor.prototype.crop = function () {
        this.$refs.cropImage.crop();
    };
    MPhotoEditor.prototype.saveImage = function (imageCropped) {
    };
    MPhotoEditor.prototype.deleteImage = function () { };
    MPhotoEditor.prototype.close = function () { };
    Object.defineProperty(MPhotoEditor.prototype, "selectMode", {
        get: function () {
            return this.photoEditorMode === MPhotoEditorMode.SELECT;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MPhotoEditor.prototype, "imageSelected", {
        get: function () {
            var images = this.$file.files(this.storeName);
            return images.length > 0 ? images[images.length - 1] : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MPhotoEditor.prototype, "validFile", {
        get: function () {
            if (this.imageSelected) {
                return this.allowedExtensions.includes(this.imageSelected.extension);
            }
            return true;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MPhotoEditor.prototype, "i18nFileError", {
        get: function () {
            return this.$i18n.translate('m-photo-editor:error-file', { extensions: this.allowedExtensions.join(', ').toUpperCase() }, 1, undefined, undefined, FormatMode.Sprintf);
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Prop({ default: '' })
    ], MPhotoEditor.prototype, "urlPhoto", void 0);
    __decorate([
        Prop({ default: false })
    ], MPhotoEditor.prototype, "open", void 0);
    __decorate([
        Prop({ default: function () { return ['jpg', 'gif', 'png', 'jpeg']; } })
    ], MPhotoEditor.prototype, "allowedExtensions", void 0);
    __decorate([
        Prop({ default: uuid.generate() })
    ], MPhotoEditor.prototype, "storeName", void 0);
    __decorate([
        Prop({ default: false })
    ], MPhotoEditor.prototype, "savingInProgress", void 0);
    __decorate([
        Prop({ default: function () { return Vue.prototype.$i18n.translate('m-photo-editor:title'); } })
    ], MPhotoEditor.prototype, "titleModal", void 0);
    __decorate([
        Watch('open', { immediate: true })
    ], MPhotoEditor.prototype, "initialize", null);
    __decorate([
        Emit('save')
    ], MPhotoEditor.prototype, "saveImage", null);
    __decorate([
        Emit('delete')
    ], MPhotoEditor.prototype, "deleteImage", null);
    __decorate([
        Emit('close')
    ], MPhotoEditor.prototype, "close", null);
    MPhotoEditor = __decorate([
        WithRender,
        Component({
            components: (_a = {
                    MMessage: MMessage,
                    MImageDisplayer: MImageDisplayer,
                    MCropImage: MCropImage
                },
                _a[FILE_SELECT_NAME] = MFileSelect,
                _a[BUTTON_NAME] = MButton,
                _a[MODAL_NAME] = MModal,
                _a)
        })
    ], MPhotoEditor);
    return MPhotoEditor;
}(ModulVue));
export { MPhotoEditor };
//# sourceMappingURL=photo-editor.js.map