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

export default class Controller extends Component {
    constructor($element, $scope, $transclude) {
        super($element, $scope);
        let element = $element[0];
        element.tabIndex = 0;

        element.addEventListener('focus', () => {
            $transclude((tClone, tScope) => {
                this.field = tClone;
                this.tScope = tScope;
                this.element.querySelector('.field').appendChild(this.field[0]);
            }, null, 'field');
            element.classList.add('selected');
        });

        element.addEventListener('focusout', event => {
            this.lastEvent = event;
            let target = event.relatedTarget;
            while (target && target.parentNode != element)
                target = target.parentNode;

            if (!target) {
                this.tScope.$destroy();
                this.field.remove();
                element.classList.remove('selected');
            }
        });
    }
}

Controller.$inject = ['$element', '$scope', '$transclude'];

ngModule.component('vnTdEditable', {
    template: require('./index.html'),
    controller: Controller,
    transclude: {
        text: 'text',
        field: '?field'
    }
});