odoo.define('kpi_dashboard.KpiFieldWidget', function(require) {
    "use strict";

    var basic_fields = require('web.basic_fields');
    var field_registry = require('web.field_registry');
    var core = require('web.core');
    var qweb = core.qweb;
    var registry = require('kpi_dashboard.widget_registry');

    var KpiFieldWidget = basic_fields.FieldChar.extend({
        jsLibs: [
            '/kpi_dashboard/static/lib/gridster/jquery.dsmorse-gridster.min.js',
        ],
        cssLibs: [
            '/kpi_dashboard/static/lib/gridster/jquery.dsmorse-gridster.min.css',
        ],
        className: 'o_dashboard_view',
        _renderReadonly: function () {
            this.$el.html($(qweb.render('dashboard_kpi.dashboard')));
            var marginx = 0;
            var marginy = 0;
            var widgetx = 400;
            var widgety = 400;
            this.$el.find('.gridster').css('width', widgety);
            this.$grid = this.$el.find('.gridster ul');
            var widgetVals = {
                value: this.value,
                col: 1,
                row: 1,
                sizex: 1,
                sizey: 1,
                name: this.recordData[this.nodeOptions.name],
                value_last_update: this.recordData[this.nodeOptions.date]
            }
            var Widget = registry.getAny([
                this.recordData[this.nodeOptions.widget], 'abstract',
            ]);
            this.state = {
                specialData: {
                    margin_x: marginx,
                    margin_y: marginy,
                    widget_dimension_x: widgetx,
                    widget_dimension_y: widgety,
                }
            }
            var widget = new Widget(this, widgetVals);
            var element = $(qweb.render(
                'kpi_dashboard.kpi', {widget: widgetVals}));
            element.css('background-color', 'white');
            element.css('color', 'black');
            this.$grid.append(element);
            widget.appendTo(element)
            this.$grid.gridster({
                widget_margins: [
                    marginx,
                    marginy,
                ],
                widget_base_dimensions: [
                    widgetx,
                    widgety,
                ],
                cols: 1,
            }).data('gridster').disable();
        },
    });
    field_registry.add('kpi', KpiFieldWidget);
    return KpiFieldWidget;
});