var _a;
import { __decorate, __extends } from "tslib";
import Component from 'vue-class-component';
import { Emit, Model, Prop, Watch } from 'vue-property-decorator';
import { InputState } from '../../mixins/input-state/input-state';
import uuid from '../../utils/uuid/uuid';
import { INPUT_GROUP_NAME, RADIO_GROUP_NAME } from '../component-names';
import { MInputGroup, MMInputGroupValidationMessagePosition } from '../input-group/input-group';
import RadioPlugin, { BaseRadioGroup, MRadioPosition, MRadioVerticalAlignement } from '../radio/radio';
import WithRender from './radio-group.html?style=./radio-group.scss';
var FOCUS_OUT_TIMEOUT_MS = 200;
var MRadioGroup = /** @class */ (function (_super) {
    __extends(MRadioGroup, _super);
    function MRadioGroup() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.name = uuid.generate();
        _this.internalValue = '';
        _this.internalIsFocus = false;
        _this.internalIsBlur = false;
        return _this;
    }
    MRadioGroup.prototype.onChange = function (value) { };
    MRadioGroup.prototype.emitFocus = function (event) { };
    MRadioGroup.prototype.emitBlur = function (event) { };
    MRadioGroup.prototype.created = function () {
        this.internalValue = undefined;
    };
    MRadioGroup.prototype.mounted = function () {
        if (this.focus) {
            this.focusChanged(this.focus);
        }
    };
    Object.defineProperty(MRadioGroup.prototype, "stateIsDisabled", {
        get: function () {
            return this.as().isDisabled;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MRadioGroup.prototype, "stateIsError", {
        get: function () {
            return this.as().hasError;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MRadioGroup.prototype, "stateIsValid", {
        get: function () {
            return this.as().isValid;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MRadioGroup.prototype, "idLabel", {
        get: function () {
            return this.hasLabel ? uuid.generate() : undefined;
        },
        enumerable: false,
        configurable: true
    });
    MRadioGroup.prototype.getValue = function () {
        return this.model;
    };
    MRadioGroup.prototype.updateValue = function (value) {
        this.model = value;
    };
    MRadioGroup.prototype.onFocus = function (event) {
        clearTimeout(this.hasFocusInTimeout);
        if (!this.internalIsBlur) {
            this.emitFocus(event);
        }
        this.internalIsFocus = true;
    };
    MRadioGroup.prototype.onBlur = function (event) {
        var _this = this;
        this.internalIsFocus = false;
        this.internalIsBlur = true;
        this.hasFocusInTimeout = setTimeout(function () {
            if (!_this.internalIsFocus) {
                _this.emitBlur(event);
            }
            _this.internalIsBlur = false;
        }, FOCUS_OUT_TIMEOUT_MS);
    };
    MRadioGroup.prototype.onValueChange = function (value) {
        this.internalValue = value;
    };
    MRadioGroup.prototype.focusChanged = function (focus) {
        var _this = this;
        var elements = this.$el.querySelectorAll('input');
        var inputEl;
        // Find right element to focus
        if (elements.length > 1) {
            elements.forEach(function (radio) {
                if (radio.value === _this.value) {
                    inputEl = radio;
                }
            });
            if (inputEl === undefined) {
                inputEl = elements[0];
            }
        }
        else {
            inputEl = elements[0];
        }
        // Focus on the element
        if (inputEl) {
            if (focus) {
                inputEl.focus();
            }
            else {
                inputEl.blur();
            }
        }
    };
    Object.defineProperty(MRadioGroup.prototype, "model", {
        get: function () {
            return this.value === undefined ? this.internalValue : this.value;
        },
        set: function (value) {
            this.internalValue = value;
            this.onChange(value);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MRadioGroup.prototype, "hasLabel", {
        get: function () {
            return !!this.label;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MRadioGroup.prototype, "idValidationMessage", {
        get: function () {
            return this.as().errorMessage || this.as().validMessage || this.as().helperMessage ? uuid.generate() : undefined;
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        Model('change'),
        Prop()
    ], MRadioGroup.prototype, "value", void 0);
    __decorate([
        Prop({
            default: MRadioPosition.Left,
            validator: function (value) {
                return value === MRadioPosition.Left ||
                    value === MRadioPosition.Right;
            }
        })
    ], MRadioGroup.prototype, "radiosPosition", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "inline", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "label", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "requiredMarker", void 0);
    __decorate([
        Prop({
            default: MRadioVerticalAlignement.Top,
            validator: function (value) {
                return value === MRadioVerticalAlignement.Top ||
                    value === MRadioVerticalAlignement.Center;
            }
        })
    ], MRadioGroup.prototype, "radiosVerticalAlign", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "radiosMarginTop", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "focus", void 0);
    __decorate([
        Prop({
            default: MMInputGroupValidationMessagePosition.Top,
            validator: function (value) {
                return value === MMInputGroupValidationMessagePosition.Top ||
                    value === MMInputGroupValidationMessagePosition.Bottom;
            }
        })
    ], MRadioGroup.prototype, "validationMessagePosition", void 0);
    __decorate([
        Prop()
    ], MRadioGroup.prototype, "validationMessageId", void 0);
    __decorate([
        Emit('change')
    ], MRadioGroup.prototype, "onChange", null);
    __decorate([
        Emit('focus')
    ], MRadioGroup.prototype, "emitFocus", null);
    __decorate([
        Emit('blur')
    ], MRadioGroup.prototype, "emitBlur", null);
    __decorate([
        Watch('value')
    ], MRadioGroup.prototype, "onValueChange", null);
    __decorate([
        Watch('focus')
    ], MRadioGroup.prototype, "focusChanged", null);
    MRadioGroup = __decorate([
        WithRender,
        Component({
            components: (_a = {},
                _a[INPUT_GROUP_NAME] = MInputGroup,
                _a),
            mixins: [InputState]
        })
    ], MRadioGroup);
    return MRadioGroup;
}(BaseRadioGroup));
export { MRadioGroup };
var RadioGroupPlugin = {
    install: function (v, options) {
        v.use(RadioPlugin);
        v.component(RADIO_GROUP_NAME, MRadioGroup);
    }
};
export default RadioGroupPlugin;
//# sourceMappingURL=radio-group.js.map