var _a, _b;
import Vue from 'vue';
import { BADGE_NAME } from '../directive-names';
// Icon state
export var MBadgeState;
(function (MBadgeState) {
    MBadgeState["Completed"] = "completed";
    MBadgeState["Error"] = "error";
    MBadgeState["Warning"] = "warning";
})(MBadgeState || (MBadgeState = {}));
var ICON_COMPLETED = 'm-svg__completed-filled';
var ICON_ERROR = 'm-svg__error-filled';
var ICON_WARNING = 'm-svg__warning-filled';
var COLOR_COMPLETED = '#00c77f';
var COLOR_ERROR = '#e30513';
var COLOR_WARNING = '#ffc103';
var DEFAULT_ORIGIN = ['23.5', '23.5'];
var BADGE_SIZE_RATIO = 16 / 30;
var BADGE_ICON = (_a = {},
    _a[MBadgeState.Completed] = ICON_COMPLETED,
    _a[MBadgeState.Error] = ICON_ERROR,
    _a[MBadgeState.Warning] = ICON_WARNING,
    _a);
var BADGE_COLOR = (_b = {},
    _b[MBadgeState.Completed] = COLOR_COMPLETED,
    _b[MBadgeState.Error] = COLOR_ERROR,
    _b[MBadgeState.Warning] = COLOR_WARNING,
    _b);
var getBadgeOrigin = function (vnode) {
    var elTag = vnode.componentOptions.tag;
    var elID = '';
    if (elTag === 'm-icon') {
        elID = vnode.componentInstance.name;
    }
    else if (elTag === 'm-icon-file') {
        elID = vnode.componentInstance.spriteId;
    }
    var element = document.getElementById(elID);
    if (element && element.dataset && element.dataset.badgeOrigin) {
        return (document.getElementById(elID).dataset.badgeOrigin).split(',');
    }
    else {
        return DEFAULT_ORIGIN;
    }
};
var getBadgeOffset = function (binding) {
    return {
        x: binding.value.offsetX !== undefined ? parseInt(binding.value.offsetX, 10) : 0,
        y: binding.value.offsetY !== undefined ? parseInt(binding.value.offsetY, 10) : 0
    };
};
var getBadgePosition = function (element, binding, vnode) {
    var leftDistance;
    var topDistance;
    var badgeOrigin = getBadgeOrigin(vnode);
    var badgeOffset = getBadgeOffset(binding);
    var elSize = (vnode.componentOptions)['propsData']['size'] ? parseInt((vnode.componentOptions)['propsData']['size'], 10) : vnode.elm.clientWidth;
    var badgeSize = elSize * BADGE_SIZE_RATIO;
    var elLeftOrigin = Number(parseFloat(badgeOrigin[0].replace(/,/g, '.')).toFixed(2));
    var elTopOrigin = Number(parseFloat(badgeOrigin[1].replace(/,/g, '.')).toFixed(2));
    leftDistance = ((elLeftOrigin / 24) * elSize) - (badgeSize * 0.5) + badgeOffset.x;
    topDistance = ((elTopOrigin / 24) * elSize) - (badgeSize * (2 / 3)) + badgeOffset.y;
    return { size: badgeSize, leftDistance: leftDistance, topDistance: topDistance };
};
var buildBadge = function (element, binding, vnode) {
    element.style.overflow = 'visible';
    var badge = getBadgePosition(element, binding, vnode);
    var MyComponent = Vue.extend({
        render: function (createElement) {
            return createElement('m-icon', {
                props: {
                    name: BADGE_ICON[binding.value.state],
                    size: badge.size
                },
                attrs: {
                    x: badge.leftDistance,
                    y: badge.topDistance
                }
            });
        }
    });
    Vue.nextTick(function () {
        var component = new MyComponent().$mount();
        if (component.$el.style) {
            component.$el.style.color = BADGE_COLOR[binding.value.state];
        }
        element.appendChild(component.$el);
    });
};
export var MBadgeDirective = {
    inserted: function (element, binding, vnode, oldVnode) {
        if (binding.value.state !== undefined && binding.value.state !== '') {
            buildBadge(element, binding, vnode);
        }
    },
    update: function (element, binding, vnode, oldVnode) {
        if (element
            && element.children
            && element.children[element.children.length - 1] !== undefined
            && element.children[element.children.length - 1].classList.contains('m-icon')) {
            element.removeChild(element.children[element.children.length - 1]);
        }
        if (binding.value.state !== undefined && binding.value.state !== '') {
            buildBadge(element, binding, vnode);
        }
    },
    unbind: function (element, binding, vnode, oldVnode) {
        if (element
            && element.children
            && element.children[element.children.length - 1] !== undefined) {
            element.removeChild(element.children[element.children.length - 1]);
        }
    }
};
var BadgePlugin = {
    install: function (v, options) {
        v.directive(BADGE_NAME, MBadgeDirective);
    }
};
export default BadgePlugin;
//# sourceMappingURL=badge.js.map