import {psr_to_xyz} from "./util.js"
import * as THREE from './lib/three.module.js';
import { globalObjectCategory } from "./obj_cfg.js";
class FastToolBox{
    constructor(ui, eventHandler)
    {
        let self = this;
        this.ui = ui;
        this.eventHandler = eventHandler;

        this.installEventHandler();

        this.ui.querySelector("#attr-editor").onmouseenter=function(event){
            if (this.timerId)
            {
                clearTimeout(this.timerId);
                this.timerId = null;
            }
            
            event.target.querySelector("#attr-selector").style.display="";

        };


        this.ui.querySelector("#attr-editor").onmouseleave=function(event){
            let ui = event.target.querySelector("#attr-selector");

            this.timerId = setTimeout(()=>{
                ui.style.display="none";
                this.timerId = null;
            },
            200);           

        };
        
        this.ui.querySelector("#label-more").onmouseenter=function(event){
            if (this.timerId)
            {
                clearTimeout(this.timerId);
                this.timerId = null;
            }
            let ui = event.target.querySelector("#object-dropdown-menu");
            ui.style.display="inherit";
            ui.style.top = "100%";
            ui.style.left = "0%";
            ui.style.right = null;
            ui.style.bottom = null;

            let rect = ui.getClientRects()[0];
            if (window.innerHeight < rect.y+rect.height)
            {
                ui.style.top = null;
                ui.style.bottom = "100%";
            }

            if (window.innerWidth < rect.x+rect.width)
            {
                ui.style.left = null;
                ui.style.right = "0%";
            }
            
        };

        this.ui.querySelector("#label-more").onmouseleave=function(event){
            let ui = event.target.querySelector("#object-dropdown-menu");
            this.timerId = setTimeout(()=>{
                ui.style.display="none";
                this.timerId = null;
            },
            200);           
        };


        let dropdownMenu = this.ui.querySelector("#object-dropdown-menu");
        for (let i = 0; i < dropdownMenu.children.length; i++)
        {
            dropdownMenu.children[i].onclick = (event) =>
            {          
                //event.preventDefault();
                event.stopPropagation();

                this.eventHandler(event);                        

                this.ui.querySelector("#object-dropdown-menu").style.display="none";                
            }                   
        }
    }

    hide()
    {
        this.ui.style.display = "none";
    }

    show()
    {
        this.ui.style.display = "inline-block";
        this.ui.querySelector("#attr-selector").style.display="none";
    }


    setValue(obj_type, obj_track_id, obj_attr){
        this.ui.querySelector("#object-category-selector").value = obj_type;

        this.setAttrOptions(obj_type, obj_attr);

        this.ui.querySelector("#object-track-id-editor").value = obj_track_id;

        if (obj_attr)
            this.ui.querySelector("#attr-input").value = obj_attr;
        else
            this.ui.querySelector("#attr-input").value = "";
        
    }

    setPos(pos)
    {
        if (pos)
        {
            this.ui.style.top = pos.top;
            this.ui.style.left = pos.left;
        }
    }

    setAttrOptions(obj_type, obj_attr)
    {
       
        let attrs = ["static"];


        if (globalObjectCategory.obj_type_map[obj_type] && globalObjectCategory.obj_type_map[obj_type].attr)
            attrs = attrs.concat(globalObjectCategory.obj_type_map[obj_type].attr);
        
        // merge attrs
        let objAttrs = [];

        if (obj_attr){
            objAttrs = obj_attr.split(",").map(a=>a.trim());
            objAttrs.forEach(a=>{
                if (!attrs.find(x=>x==a))
                {
                    attrs.push(a);
                }
            })
        }


        let items = ``;

        
        attrs.forEach(a=>{
            if (objAttrs.find(x=>x==a)){
                items+= `<div class='attr-item attr-selected'>${a}</div>`
            }
            else {
                items+= `<div class='attr-item'>${a}</div>`
            }
        });
        
            
        this.ui.querySelector("#attr-selector").innerHTML = items;

        this.ui.querySelector("#attr-selector").onclick = (event)=>{

            let attrs = this.ui.querySelector("#attr-input").value;

            let objCurrentAttrs = [];
            if (attrs)
                objCurrentAttrs = attrs.split(",").map(a=>a.trim());
            

            let clickedAttr = event.target.innerText;

            if (objCurrentAttrs.find(x=>x==clickedAttr))
            {
                objCurrentAttrs = objCurrentAttrs.filter(x => x!= clickedAttr);
                event.target.className = 'attr-item';
            }
            else
            {
                objCurrentAttrs.push(clickedAttr);
                event.target.className = 'attr-item attr-selected';
            }

            attrs = "";
            if (objCurrentAttrs.length > 0)
            {
                attrs = objCurrentAttrs.reduce((a,b)=>a+ (a?",":"") + b);
            }

            this.ui.querySelector("#attr-input").value = attrs;

            this.eventHandler({
                currentTarget:{
                    id: "attr-input",
                    value: attrs
                }
            });
            
        }
        
    }

    installEventHandler(){

        let btns = [
            "#label-del",
            "#label-gen-id",
            "#label-copy",
            "#label-paste",
            "#label-batchedit",
            "#label-trajectory",
            "#label-edit",
            "#label-highlight",
            "#label-rotate",
        ];

        btns.forEach(btn=>{
            this.ui.querySelector(btn).onclick = (event)=>{
                this.eventHandler(event);
            };
        });  

        this.ui.querySelector("#object-category-selector").onchange =  event=>{
            
            //this.ui.querySelector("#attr-input").value="";
            this.setAttrOptions(event.currentTarget.value, this.ui.querySelector("#attr-input").value);
            this.eventHandler(event);
        };


        this.ui.querySelector("#object-track-id-editor").onchange =    event=>this.eventHandler(event);
        this.ui.querySelector("#object-track-id-editor").addEventListener("keydown", e=>e.stopPropagation());
        this.ui.querySelector("#object-track-id-editor").addEventListener("keyup", event=>{
            event.stopPropagation();
            this.eventHandler(event);
        });
        
        this.ui.querySelector("#attr-input").onchange =    event=>this.eventHandler(event);
        this.ui.querySelector("#attr-input").addEventListener("keydown", e=>e.stopPropagation());
        this.ui.querySelector("#attr-input").addEventListener("keyup", event=>{
            event.stopPropagation();
            this.eventHandler(event);
        });
    }
}



class FloatLabelManager {
 
    id_enabled = true;
    category_enabled = true;
    color_scheme = "category";

    constructor(editor_ui, container_div, view, func_on_label_clicked)
    {
        this.view = view;  //access camera by view, since camera is dynamic
        this.editor_ui = editor_ui;
        this.container = container_div;
        this.labelsUi = editor_ui.querySelector("#floating-labels");
        this.floatingUi = editor_ui.querySelector("#floating-things");
        
        
    
        this.style = document.createElement('style');
        this.temp_style = document.createElement('style');
        this.on_label_clicked = func_on_label_clicked;

        document.head.appendChild(this.style);            
        document.head.appendChild(this.temp_style);      

        this.id_enabled = !pointsGlobalConfig.hideId;
        this.category_enabled = !pointsGlobalConfig.hideCategory;
    }

    hide(){
        this.floatingUi.style.display="none";
    }

    show(){
        this.floatingUi.style.display="";
    }


    

    show_id(show){
        
        this.id_enabled = show;

        if (!show){
            this.temp_style.sheet.insertRule(".label-obj-id-text {display: none}");
        }
        else{
            for (let i = this.temp_style.sheet.cssRules.length-1; i >= 0; i--){
                var r = this.temp_style.sheet.cssRules[i];
                if (r.selectorText === ".label-obj-id-text"){
                    this.temp_style.sheet.deleteRule(i);
                }
            }
            
        }

    }

    show_category(show){
        
        this.category_enabled = show;

        if (!show){
            this.temp_style.sheet.insertRule(".label-obj-type-text {display: none}");
            this.temp_style.sheet.insertRule(".label-obj-attr-text {display: none}");
        }
        else{
            for (let i = this.temp_style.sheet.cssRules.length-1; i >= 0; i--){
                var r = this.temp_style.sheet.cssRules[i];
                if (r.selectorText === ".label-obj-type-text" || r.selectorText === ".label-obj-attr-text"){
                    this.temp_style.sheet.deleteRule(i);
                }
            }
        }
        
    }

    // hide all temporarily when zoom in one object.
    hide_all(){
        // if (this.temp_style.sheet.cssRules.length == 0){
        //     this.temp_style.sheet.insertRule(".label-obj-id-text {display: none}");
        //     this.temp_style.sheet.insertRule(".label-obj-type-text {display: none}");
        //     this.temp_style.sheet.insertRule(".label-obj-attr-text {display: none}");
        // }
        this.labelsUi.style.display = "none";
    }

    restore_all(){
        // this.show_category(this.category_enabled);
        // this.show_id(this.id_enabled);   
        this.labelsUi.style.display = "";
    }

    remove_all_labels(){
        
        var _self = this;

        if (this.labelsUi.children.length>0){
            for (var c=this.labelsUi.children.length-1; c >= 0; c--){
                this.labelsUi.children[c].remove();                    
            }
        }
    }

    
    update_all_position(){
        if (this.labelsUi.children.length>0){
            for (var c=0; c < this.labelsUi.children.length; c++){
                var element = this.labelsUi.children[c];
                
                var best_pos = this.compute_best_position(element.vertices);
                var pos = this.coord_to_pixel(best_pos);

                element.style.top = Math.round(pos.y) + 'px';
                element.style.left = Math.round(pos.x) + 'px';


                element.className = element.orgClassName;
                if (pos.out_view){
                    element.className += " label-out-view";                         
                }
                
            }
        }
    }

    getLabelEditorPos(local_id)
    {
        let label = this.editor_ui.querySelector("#obj-local-"+local_id);
        if (label)
        {
            // if label is hidden, we can't use its pos directly.
            let best_pos = this.compute_best_position(label.vertices);
            let pos = this.coord_to_pixel(best_pos);

            
            return {
                top:  Math.round(pos.y) + label.offsetHeight + "px",
                left: Math.round(pos.x) + 30 + "px",
                };
        }
    }

    
    set_object_type(local_id, obj_type){
        var label = this.editor_ui.querySelector("#obj-local-"+local_id);
        if (label){
            label.obj_type = obj_type;
            label.update_text();
            this.update_color(label);
        }
    }

    set_object_attr(local_id, obj_attr){
        var label = this.editor_ui.querySelector("#obj-local-"+local_id);
        if (label){
            label.obj_attr = obj_attr;
            label.update_text();
            this.update_color(label);
        }
    }

    
    set_object_track_id(local_id, track_id){
        var label = this.editor_ui.querySelector("#obj-local-"+local_id);

        if (label){
            label.obj_track_id = track_id;
            label.update_text();   
            this.update_color(label);             
        }
    }

    translate_vertices_to_global(world, vertices) {
        let ret = [];
        for (let i = 0; i< vertices.length; i+=4)
        {
            let p = new THREE.Vector4().fromArray(vertices, i).applyMatrix4(world.webglGroup.matrix);
            ret.push(p.x);
            ret.push(p.y);
            ret.push(p.z);
            ret.push(p.w);
        }

        return ret;
        
    }

    update_position(box, refresh){
        var label = this.editor_ui.querySelector("#obj-local-"+box.obj_local_id);
        
        if (label){
            
            label.vertices = this.translate_vertices_to_global(box.world, psr_to_xyz(box.position, box.scale, box.rotation));

            if (refresh){
                var best_pos = this.compute_best_position(label.vertices);
                var pos = this.coord_to_pixel(best_pos);

                label.style.top = Math.round(pos.y) + 'px';
                label.style.left = Math.round(pos.x) + 'px';

                label.className = label.orgClassName;
                if (pos.out_view){
                    label.className += " label-out-view";                         
                }
            }
        }
    }

    

    remove_box(box){
        var label = this.editor_ui.querySelector("#obj-local-"+box.obj_local_id);

        if (label)
            label.remove();
    }

    set_color_scheme(color_scheme){
        this.color_scheme = color_scheme;
    }
    update_color(label)
    {
        if (this.color_scheme == "id")
        {                
            label.className = "float-label color-"+ (label.obj_track_id % 33);
        }
        else // by id
        {
            label.className = "float-label "+label.obj_type;
        }
        
        label.orgClassName = label.className;
    }

    add_label(box){
        
        var label = document.createElement('div');
        
        

        label.id = "obj-local-"+box.obj_local_id;

        var _self =this;

        label.update_text = function(){
            let label_text = '<div class="label-obj-type-text">';                
            label_text += this.obj_type;
            label_text += '</div>';

            if (this.obj_attr)
            {
                label_text += '<div class="label-obj-attr-text">';                
                label_text += this.obj_attr;
                label_text += '</div>';
            }

            label_text += '<div class="label-obj-id-text">';                
            label_text += this.obj_track_id;                
            label_text += '</div>';
            
            this.innerHTML = label_text; 
        }
        
        label.obj_type = box.obj_type;
        label.obj_local_id = box.obj_local_id;
        label.obj_track_id = box.obj_track_id;
        label.obj_attr = box.obj_attr;
        label.update_text();
        this.update_color(label);

        label.vertices = this.translate_vertices_to_global(box.world, psr_to_xyz(box.position, box.scale, box.rotation));

        var best_pos = this.compute_best_position(label.vertices);
        best_pos = this.coord_to_pixel(best_pos);
        
        var pos = best_pos;
        
        label.style.top = Math.round(pos.y) + 'px';
        label.style.left = Math.round(pos.x) + 'px';

        if (pos.out_view){
            label.className += " label-out-view";
        }

        this.labelsUi.appendChild(label);

        let self = this;
        label.onclick = ()=>{
            this.on_label_clicked(box);
        };
    }


    coord_to_pixel(p){
        var width = this.container.clientWidth, height = this.container.clientHeight;
        var widthHalf = width / 2, heightHalf = height / 2;

        var ret={
            x: ( p.x * widthHalf ) + widthHalf + 10,
            y: - ( p.y * heightHalf ) + heightHalf - 10,
            out_view: p.x>0.9 || p.x<-0.6 || p.y<-0.9 || p.y>0.9 || p.z< -1 || p.z > 1,
            // p.x<-0.6 to prevent it from appearing ontop of sideviews.
        }

        return ret;
    }

    compute_best_position(vertices){
        var _self = this;
        var camera_p = [0,1,2,3,4,5,6,7].map(function(i){
            return new THREE.Vector3(vertices[i*4+0], vertices[i*4+1], vertices[i*4+2]);
        });
        
        camera_p.forEach(function(x){
            x.project(_self.view.camera);
        });
        
        var visible_p = camera_p;

        var best_p = {x:-1, y: -1, z: -2};

        visible_p.forEach(function(p){
            if (p.x > best_p.x){
                best_p.x = p.x;
            }

            if (p.y > best_p.y){
                best_p.y = p.y;
            }

            if (p.z > best_p.z){
                best_p.z = p.z;
            }
        })

        return best_p;
    }
}


export {FloatLabelManager, FastToolBox};