declare const RF;

import './input.scss';
import {Measurer} from './measurer';




@RF.decorateComponent({
    name: 'app-input',
    template: require('./input.html')
})
export class Input {

    input;
    carretLeftPos: number = 0;
    visible: boolean = false;
    focused: boolean = false;
    valueObj = null;

    private getCursorPos(){
        return this.input.selectionStart;
    }

    private setCursor(){
        this.carretLeftPos = 
                Measurer.instance.measureInputText(this.input,this.getCursorPos());
                this.visible = true;
    }

    onMount(){
        this.input = (this['$el'] as any).querySelector('input');
        this.input.addEventListener('select', function() {
        this.selectionStart = this.selectionEnd;
        }, false);
        this.input.addEventListener('keyup',()=>{
            this.setCursor();
            RF.digest(); 
        });
        this.input.addEventListener('input',()=>{
            this.valueObj.value = this.input.value;
            RF.digest();
        });
        this.input.addEventListener('focus',()=>{
            this.focused = true;
            this.visible = true;
            RF.digest();
        });
        this.input.addEventListener('click',()=>{
            this.setCursor();
            RF.digest();
        });
        this.input.addEventListener('blur',()=>{
            this.focused = false;
        });
        setInterval(()=>{
            if (!this.focused) {
                this.visible = false;
            }
            else {
                this.visible = !this.visible;
            }    
        },1000);
    }

}