class KeyframeView extends WindozDomContent {

    constructor() {
        super()
        Object.assign(this, app.helpers.activeAttributes)
    }
    
    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: `${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

    }



    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)
    }

    fillAgentProperties(agentProps){
        let allFields = []
        for(const propName in agentProps){
            const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
            let component
            switch(agentProps[propName].type){
                case 'number':
                    component = document.createElement('input')
                    component.setAttribute('type','number')
                    if(agentProps[propName].min) component.setAttribute('min', agentProps[propName].min)
                    if(agentProps[propName].max) component.setAttribute('max', agentProps[propName].max)
                    component.value = agentProps[propName].default
                    break
                case 'string': 
                    component = document.createElement('input')
                    component.setAttribute('type','text')
                    component.value = agentProps[propName].default
                    break
                case 'boolean':                        
                    component = document.createElement('bz-toggler')
                    component.setAttribute('trueValue','1')
                    component.setAttribute('falseValue','0')
                    component.value = agentProps[propName].default
                    fieldRow.append(component.el)                    
                    break                    
                case 'list':
                    component = document.createElement('bz-select')
                    component.fillOptions( agentProps[propName].choices.map(item => {
                        return({ markup: `${item}`, value: item})
                    })) 
                    break
                default:
                    console.warn(`Unknown field type ${agentProps[propName].type}`)
            }
            fieldRow.append(component)
            allFields.push(fieldRow)
        }
        this.outputs.agentProperties.innerHTML=''
        this.outputs.agentProperties.append(...allFields)
    }

}

app.registerClass('KeyframeView', KeyframeView)