class KeyframeView extends WindozDomContent {

    constructor() {
        super()
        Object.assign(this, app.helpers.activeAttributes)
        Object.assign(this, app.helpers.formBuilder)
    }
    
    DOMContentFocused(options) { 
        if(this.wasBlured){ // Avoid 2nd refesh on DomContentLoaded
            //this.refreshyoustuff() 
        }
        this.wasBlured = false
    }

    DOMContentBlured(options) { this.wasBlured = true }

    async DOMContentLoaded(options) {    
        this.windowPrefsId = `editors.keyframeview`
        this.models = options.models
        const components = ui.eicfy(this.el)       
        this.setupTriggers(components)        
        this.setupRefs(components)

        const [sprites, types] = await Promise.all([
            this.models.agents.getSprites('Basic 3D'),
            this.models.agents.getTypes('Test agents')
        ])

        this.agentSprites = sprites
        this.agentTypes = types


        this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
            return({ markup: `<i class="icon-${item.atp_hascode ? 'bug' : 'atom1'}"></i>${item.atp_name}`, value: item.atp_id})
        }))
        this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
        
        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentSprites)
        this.onChangeAgent()
        this.agentPreview.startRendering()
        this.agentPreview.animation = true

        this.kfArena = new app.LoadedModules.kfArena(this.outputs.kfArenaCanvas, this.agentSprites)
        this.kfArena.onclickAgent = this.onclickAgent.bind(this)
        this.kfArena.startRendering()
       
        this.outputs.btnAddAgent.disabled = true
        this.outputs.btnRemoveAgent.disabled = true        
        this.outputs.btnSaveKF.disabled = true  
    }

    async onChangeAgent(event){
        if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
        if(!this.outputs.agentsSelector.value) return
        const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
        this.fillAgentProperties('', agent.atp_props)
    }

    onclickAgent(aid){
        console.log('Agent clicked:', aid)
        this.updateKfButtons()
    }

    onAddAgent(event){
        //TODO prevent collisions !

        const aid = crypto.randomUUIDv7()
        this.output('agentId', `ID: ${aid}`)
        this.kfArena.addAgent(this.outputs.agentsSelector.value, aid, {
            position: {
                x: document.querySelector('[name="position.x"]').value,
                y: document.querySelector('[name="position.y"]').value,
                z: document.querySelector('[name="position.z"]').value,
            }
        })
        this.updateKfButtons()
    }

    updateKfButtons(){
        if(this.kfArena.agents.length > 0) this.outputs.btnSaveKF.disabled = false  
    }

    fillAgentProperties(aid, agentProps){ 
        this.outputs.agentProperties.innerHTML = `
            <div data-output="agentId">ID: ${aid}</div>
        `
        this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, 'Internal properties'))
        this.outputs.agentProperties.append(...this.fieldsFromJSON({
            "position.x": {
                label: "Position X",
                type: "number",
                default: "0"
            },
            "position.y": {
                label: "Position Y",
                type: "number",
                default: "0"
            },
            "position.z": {
                label: "Position Z",
                type: "number",
                default: "0"
            },
        }, 'Coordinates'))
        this.outputs.agentProperties.append(...this.fieldsFromJSON({
            "speed.x": {
                label: "Speed X",
                type: "number",
                default: "0"
            },
            "speed.y": {
                label: "Speed Y",
                type: "number",
                default: "0"
            },
            "speed.z": {
                label: "Speed Z",
                type: "number",
                default: "0"
            },
        }, 'Speed vector'))
        this.outputs.btnAddAgent.disabled = false
        this.setupRefs()
    }

    onSaveKF(evt){
        console.log('SAVE:',this.kfArena.agents)
    }

}

app.registerClass('KeyframeView', KeyframeView)