odoo.define('dss.screenDesigner', function (require) {
"use strict";

var AbstractAction = require('web.AbstractAction');
var core = require('web.core');
var field_utils = require('web.field_utils');
var QWeb = core.qweb;
var web_client = require('web.web_client');
var ajax = require('web.ajax');
var _t = core._t;
var rpc = require('web.rpc');
var self = this;
var session = require('web.session');
var viewRegistry = require('web.view_registry');
var aktcontext = "";

function _onclickevent(event) {        
    // Check if the clicked element has the class "button"
    if (event.target.classList.contains("ddbtn")) {
        alert(JSON.stringify($(event.currentTarget)))
    };
};

function _onchangeevent(event) {        
    // Check if the clicked element has the class "button"
    if (event.target.classList.contains("ddown")) {
    // Your event handler code
    //  here
//        alert($(this))
//        alert(event.target.value)
//        alert(JSON.stringify($(event.target.value)))
        aktcontext.context.screenlayout = event.target.value        
        alert(aktcontext);
        rpc.query({model: 'dss.screendesign',
        	method: 'myscreenrebuild',
        	args: [this.res_id],
    	}).then(function (result) {
            alert(JSON.stringify(result));
        	event.do_action(result);
            return result;
    	});
    }
};

var screenDesigner = AbstractAction.extend({
    contentTemplate: 'screen_view.ScreenView',        
    init: function(parent, context) {        
        this._super(parent, context);
        aktcontext = context;        
        this.dashboard_templates = ['MainSection'];
    },
    start: function() {
           var self = this;
           alert(aktcontext.context.screenlayout);
           this.set("title", 'Dashboard');
           return this._super().then(function() {
               self.render_dashboards();
           });
    },
    willStart: function(){
           var self = this;
           return this._super()
    },
    render_dashboards: function() {
           var self = this;
           var meins = "";
           var templates = []
           var templates = ['MainSection'];

           var def0 =this._rpc({
                model: 'dss.display.templates',
                method: "get_data",
                args: [],
            }).then(function (result) {            

                var $dropdown = document.querySelector('.ddown')

                if (result.length>0) {
                    result.forEach(element => {
                        
                        $dropdown.append(new Option(element.displayname, element.nr));
                    })
                }

                _.each(templates, function(template) {self.$('.meinfeld').append(meins)});
            })

            document.addEventListener("click",_onclickevent)
            document.addEventListener("change",_onchangeevent)
          
           var def1 =this._rpc({
                model: 'dss.advertisefields.templates',
                method: "get_data",
                args: [[aktcontext.context.screenlayout]],
            }).then(function (result) {            
                
                var displaycss = 'background-color:#38AFA0;float:left;border-style: solid;border-width: 0.1px;'
                const element = document.querySelector('.meincanvas')
                const rect = element.getBoundingClientRect();
                const topPosition = rect.top + window.scrollY;
                var topstart = topPosition + 60 
                var width = window.innerWidth-40;
                var scale_faktor = (width / 3860)
                var height =  Math.round(2200 * scale_faktor)
                meins = '<div style="background-color:#000000;padding:20px;height:'+height+'px;floating:left">'
                if (result.length>0) {
                    result.forEach(element => {
                        var ele_pos_x=element.pos_x*scale_faktor+20
                        var ele_pos_y=element.pos_y*scale_faktor+topstart
                        var ele_pos_h=element.pos_h*scale_faktor
                        var ele_pos_w=element.pos_w*scale_faktor
                        meins = meins + '<div class="ddbtn" style="'+displaycss+'position:absolute;left:'+ele_pos_x+'px;top:'+ele_pos_y+'px;width:'+ele_pos_w+'px;height:'+ele_pos_h+'px;">'+element.feldname+'</div>'
                    });                    
                }
//                meins = meins + '<div style="'+displaycss+'width:200px;height:100px;">'+result.length+'</div>'
//                meins = meins + '<div style="'+displaycss+'width:300px;height:100px;">'+result+'</div>'
//                meins = meins + '<div style="'+displaycss+'width:100px;height:100px;">'+JSON.stringify(result)+'</div></div>'
                _.each(templates, function(template) {self.$('.o_hr_dashboard').append(meins)});
            })
    },
});

core.action_registry.add('dss_screenDesigner_js_action', screenDesigner);

viewRegistry.add('ScreenDesigner', screenDesigner);

return screenDesigner;

});