class MainDashboardView extends EICDomContent {

    agentTypes = {
        molecule1:{
            type: 'circle',
            attrs: {
                r: 10,
                fill: '#BFB',
                stroke:  "#0A0",
                strokeWidth: 2,
            }
        },
        molecule2:{
            type: 'circle',
            attrs: {
                r: 10,
                fill: '#BBF',
                stroke:  "#00A",
                strokeWidth: 2,
            }
        }

    }

    constructor() {
        super()
        Object.assign(this, app.helpers.activeAttributes)
        //this.tileMarkup = app.Assets.Store.html['/app/assets/html/mailing/tile.html']
        this.snap = null
        this.snaptobus = null
    }

    DOMContentLoaded(options) {        
        for(let model in options.models) this[model] = options.models[model]
        const components = ui.eicfy(this.el)       
        this.setupTriggers(components)        
        this.setupRefs(components)
        this.snaptobus = new Snaptobus({ 
            snap: Snap("svg.stb"),
            spriteDefs: this.agentTypes,
            busConfig: [
                {   
                    chan: 'gps:agents', // What to subscribe to
                    events: [  // What to select on this chan
                                {   eventName: 'moving',
                                    snaps: [
                                        {
                                            selector: '#${aid}', 
                                            assign: {
                                                cx: 'attrs.x',  
                                                cy: 'attrs.y',
                                            },
                                            animate: true
                                        }
                                    ]
                                },
                            ]
                },
            ]
        })
        // var agent = this.snap.circle(150, 150, 20);
        // agent.attr({
        //     id: 'agent42',
        //     fill: "#BFB",
        //     stroke: "#0A0",
        //     strokeWidth: 2
        // });
        this.createAgent('molecule2', 'agent42', 100,100)
        //setTimeout(this.moveit.bind(this), 3000);
    }

    DOMContentFocused(options) { 
        // Avoid 2nd refesh on DomContentLoaded
        if(this.wasBlured){ 
            //this.refreshSearch() 
        }
        this.wasBlured = false
    }

    DOMContentBlured(options) { this.wasBlured = true }

    createAgent(agentType, id,  x, y){
        if(!Object.keys(this.agentTypes).includes(agentType)) return
        this.agentTypes[agentType]
        const svgAgent = this.snaptobus.snap[this.agentTypes[agentType].type]().attr(this.agentTypes[agentType].attrs)
        svgAgent.attr({
            id: id,
            cx: x,
            cy:y,
        })
    }

    // moveit(){
    //     var myCircle = this.snap.select('#agent42')

    //     var newx = parseInt(myCircle.attr('cx')) + 600
    //     var newy = parseInt(myCircle.attr('cy')) + 200

    //     // animate translate
    //     myCircle.animate(
    //         {
    //             cx: newx,
    //             cy: newy,
    //         },
    //         1000,                          // duration in ms
    //         mina.linear                     // easing
    //     )
    // }
}

app.registerClass('MainDashboardView', MainDashboardView)