import { __awaiter, __decorate, __extends, __generator } from "tslib";
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { InputState } from '../../mixins/input-state/input-state';
import { ModulVue } from '../../utils/vue/vue';
import { INPUT_STYLE_NAME } from '../component-names';
import { MSpinner } from '../spinner/spinner';
import WithRender from './input-style.html';
import './input-style.scss';
export var CSS_LABEL_DEFAULT_MARGIN = 10;
var MInputStyle = /** @class */ (function (_super) {
    __extends(MInputStyle, _super);
    function MInputStyle() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.labelOffset = CSS_LABEL_DEFAULT_MARGIN + 'px';
        _this.suffixOffset = '0px';
        _this.animReady = false;
        return _this;
    }
    MInputStyle.prototype.created = function () {
        var _this = this;
        setTimeout(function () {
            _this.animReady = true;
            _this.setInputWidth();
        }, 0);
    };
    MInputStyle.prototype.mounted = function () {
        this.computeLabelOffset();
        this.computeSuffixOffset();
    };
    MInputStyle.prototype.setInputWidth = function () {
        var _this = this;
        // This is not very VueJs friendly.  It should be replaced by :style or something similar.
        this.$nextTick(function () {
            var labelEl = _this.$refs.label;
            var inputEl = _this.as().getInput();
            var adjustWidthAutoEl = _this.$refs.adjustWidthAuto;
            if (_this.width === 'auto' && _this.hasAdjustWidthAutoSlot) {
                setTimeout(function () {
                    if (inputEl !== undefined) {
                        inputEl.style.width = '0px';
                        setTimeout(function () {
                            if (inputEl !== null) {
                                var width = adjustWidthAutoEl.clientWidth < 50 ? 50 : adjustWidthAutoEl.clientWidth;
                                if (_this.hasLabel) {
                                    width = !_this.isLabelUp && (labelEl.clientWidth > width) ? labelEl.clientWidth : width;
                                }
                                inputEl.style.width = width + 'px';
                            }
                        }, 0);
                    }
                }, 0);
            }
            else if (inputEl) {
                if (inputEl.style.width) {
                    inputEl.style.removeProperty('width');
                }
            }
        });
    };
    MInputStyle.prototype.computeLabelOffset = function () {
        if (this.label) {
            var labelOffset = this.$refs.label.clientHeight / 2;
            this.labelOffset = this.isLabelUp && labelOffset > CSS_LABEL_DEFAULT_MARGIN ? labelOffset + "px" : CSS_LABEL_DEFAULT_MARGIN + "px";
        }
        else {
            this.labelOffset = undefined;
        }
    };
    MInputStyle.prototype.computeSuffixOffset = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0: return [4 /*yield*/, this.$nextTick()];
                    case 1:
                        _a.sent();
                        if (this.label && this.$refs.suffix) {
                            this.suffixOffset = this.$refs.suffix.clientWidth + 'px';
                        }
                        else {
                            this.suffixOffset = undefined;
                        }
                        return [2 /*return*/];
                }
            });
        });
    };
    Object.defineProperty(MInputStyle.prototype, "isLabelUp", {
        get: function () {
            return (this.hasValue || (this.isFocus && this.hasValue) || this.labelUp) && this.hasLabel;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "showPrefix", {
        get: function () {
            return this.hasLabel ? this.isFocus : true;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "hasValue", {
        get: function () {
            return this.hasDefaultSlot && !this.empty;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "hasLabel", {
        get: function () {
            return !!this.label && this.label !== '';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "isFocus", {
        get: function () {
            var focus = this.focus && this.as().active;
            this.$emit('focus', focus);
            return focus;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "hasDefaultSlot", {
        get: function () {
            return !!this.$slots.default;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MInputStyle.prototype, "hasAdjustWidthAutoSlot", {
        get: function () {
            return !!this.$slots['adjust-width-auto'];
        },
        enumerable: false,
        configurable: true
    });
    MInputStyle.prototype.onClick = function (event) { };
    MInputStyle.prototype.onMousedown = function (event) { };
    MInputStyle.prototype.onMouseup = function (event) { };
    __decorate([
        Prop({ default: '' })
    ], MInputStyle.prototype, "label", void 0);
    __decorate([
        Prop()
    ], MInputStyle.prototype, "labelFor", void 0);
    __decorate([
        Prop({ default: false })
    ], MInputStyle.prototype, "labelUp", void 0);
    __decorate([
        Prop()
    ], MInputStyle.prototype, "labelId", void 0);
    __decorate([
        Prop({ default: false })
    ], MInputStyle.prototype, "focus", void 0);
    __decorate([
        Prop({ default: false })
    ], MInputStyle.prototype, "append", void 0);
    __decorate([
        Prop({ default: true })
    ], MInputStyle.prototype, "empty", void 0);
    __decorate([
        Prop()
    ], MInputStyle.prototype, "width", void 0);
    __decorate([
        Prop()
    ], MInputStyle.prototype, "requiredMarker", void 0);
    __decorate([
        Prop()
    ], MInputStyle.prototype, "readonly", void 0);
    __decorate([
        Prop({ default: false })
    ], MInputStyle.prototype, "cursorPointer", void 0);
    __decorate([
        Watch('isLabelUp')
    ], MInputStyle.prototype, "computeLabelOffset", null);
    __decorate([
        Emit('click')
    ], MInputStyle.prototype, "onClick", null);
    __decorate([
        Emit('mousedown')
    ], MInputStyle.prototype, "onMousedown", null);
    __decorate([
        Emit('mouseup')
    ], MInputStyle.prototype, "onMouseup", null);
    MInputStyle = __decorate([
        WithRender,
        Component({
            components: {
                MSpinner: MSpinner
            },
            mixins: [InputState]
        })
    ], MInputStyle);
    return MInputStyle;
}(ModulVue));
export { MInputStyle };
var InputStylePlugin = {
    install: function (v, options) {
        v.component(INPUT_STYLE_NAME, MInputStyle);
    }
};
export default InputStylePlugin;
//# sourceMappingURL=input-style.js.map