import * as JQuery from 'jquery';
import { Router } from '@angular/router';

export class Icons {

    constructor() {
        this.posX = 0;
        this.PosY = 0;
        this.height = null;
        this.width = null;
        this.url = '../src/assets/images/icon-factory.png';
        this.container = '#dale';
        this.id = "";
        this.idPadre = "";
        this.name = "";
        this.namePadre = "";
        this.hoverMode = false;
    }

    setId(id){
        this.id = id;
    }
    setIdPadre(id){
        this.idPadre = id;
    }
    setName(name){
        this.name = name;
    }

    setPosX(posX){
        this.posX = posX;
    }
    setPosY(posY){
        this.posY = posY;
    }
    setHeight(height){
        this.height = height;
    }
    setWidth(width){
        this.width = width;
    }
    setUrl(url){
        this.url = url;
    }
    setHoverMode(hover){
        this.hoverMode = hover;
    }
    
    
    Draw(that,renderer,router,thatAll, type, elem){
        this.container = that;
        const div = renderer.createElement('div');
        renderer.setStyle(div, 'width', '30px');
        renderer.setAttribute(div, 'id', this.id);
        renderer.setStyle(div, 'top', this.posX);
        renderer.setStyle(div, 'right', this.posY);
        renderer.setStyle(div, 'position', 'absolute');
        renderer.setStyle(div, 'cursor', 'pointer');
        // div.innerHTML =  '<img id="'+ this.id +'" src = "'+ this.url +'" style="top:'+ this.posX 
        // +';right:'+ this.posY +';height:'+  this.height +'; width: '+ this.width + ';">';
        renderer.setAttribute(div,'uk-tooltip', this.name);
        renderer.addClass(div,'iconHover');
        renderer.setStyle(div,'content',  'url('+ this.url+')');

        if (this.hoverMode){

            renderer.setAttribute(div, 'attr.uk-toggle', 'target: #offcanvas-overlay');

        }


        // renderer.setStyle(div, 'height', this.height);

        if (type == 0){
            
           
            // div.innerHTML = '<div uk-tooltip="' + this.name +'" class="iconHover" style="content: url('+ this.url +'); position:relative;height:'+  this.height +';"></div>';
            renderer.addClass(div,'padre');
            renderer.listen(div, 'click', (evt) => {
                this.namePadre = evt.target.attributes['uk-tooltip'].nodeValue;
                 var idPadre = evt.target.id;
                
                // router.navigate(['c2/c2n1']);
                // renderer.setStyle(that.children[elem],'display','none');
                // renderer.setStyle(that.children['j1_1_1'],'display','');
                thatAll.jquery(0,idPadre);

                if (thatAll.triggerDrilldown != undefined){

                    thatAll.triggerDrilldown(this.namePadre);
                    
                }
                
            });
        }

        else{
            renderer.addClass(div,'hijos');
            renderer.addClass(div,elem);
            renderer.setStyle(div,'display','none');
            renderer.listen(div, 'click', (evt) => {
                //thatAll.toggle()
                var nombreHijo= evt.target.attributes['uk-tooltip'].nodeValue;
                var nombre = this.namePadre;
                router.navigate(['c2/c2n1', nombreHijo]);



            });


        }
        
        renderer.listen(div, 'mouseenter',(evt) => {
                thatAll.updateGauge(evt.target.id);
                
          });
        renderer.appendChild(this.container, div);
    }

}

