import ngModule from '../../module';
import Component from 'core/lib/component';
import './style.scss';

/**
 * Simple component to display a label with it's correspoding value. If @info
 * property is provided it displays an aditional icon with the provided
 * information.
 *
 * IMPORTANT!
 *
 * Please keep this component as simple as possible and without persistent
 * watchers because it's used a lot of times in the application and could cause
 * performance issues.
 *
 * @property {String} label The label
 * @property {*} value The value
 * @property {String} info Aditional information to display
 */
export default class Controller extends Component {
    get label() {
        return this._label;
    }

    set label(value) {
        this._label = value;

        let label = this.element.querySelector('vn-label');
        label.textContent = this.$t(value);
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = value;

        let span = this.element.querySelector('span');
        span.title = value;
        span.textContent = value != null && value != '' ? value : '-';
    }
}

ngModule.component('vnLabelValue', {
    controller: Controller,
    template: require('./index.html'),
    transclude: true,
    bindings: {
        label: '@',
        value: '@?',
        info: '@?'
    }
});