import ngModule from '../../module';
import './style.scss';

export default class Controller {
    constructor($element, $translate, $attrs) {
        this.element = $element[0];
        this._ = $translate;
        this.hasInfo = Boolean($attrs.info);
        this.info = $attrs.info || null;
    }

    set label(value) {
        let label = this.element.querySelector('vn-label');
        label.textContent = this._.instant(value);
        this._label = value;
    }

    get label() {
        return this._label;
    }

    get state() {
        return this._state;
    }

    set state(value) {
        this._state = value;
        this.applyTextContent();
    }

    get value() {
        return this._value;
    }

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

    get title() {
        return this._title;
    }

    set title(value) {
        let span = this.element.querySelector('span');
        span.title = value;
        this._title = value;
    }

    applyTextContent() {
        const targetElement = this.state ? 'a' : 'span';
        const element = this.element.querySelector(targetElement);
        const hasValue = this.value && this.value != '';
        element.title = this.value;
        element.textContent = hasValue ? this.value : '-';
    }
}
Controller.$inject = ['$element', '$translate', '$attrs'];

ngModule.component('vnLabelValue', {
    controller: Controller,
    template: require('./label-value.html'),
    bindings: {
        title: '@?',
        label: '@',
        value: '@',
        state: '@?',
        stateParams: '<?'
    }
});