import ngModule from '../../module';
import Component from '../../lib/component';
import {focus} from '../../directives/focus';
import './style.scss';

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

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

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

            if (!target) {
                this.tScope.$destroy();
                this.field.remove();
                this.field = null;
                element.classList.remove('selected');
                element.tabIndex = 0;
            }
        });
    }
    destroyTimer() {
        if (this.timer) {
            this.$timeout.cancel(this.timer);
            this.timer = null;
        }
    }

    $onDestroy() {
        this.destroyTimer();
    }
}
Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];

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