import { Component } from '../../lib/vues6/vues6.js'
import { event_bus } from '../service/EventBus.service.js'

const template = `
<coreid-root :page="page" :form_id="form_id" :resource="resource" :mode="mode" v-if="show"></coreid-root>
`
export default class OutletPageComponent extends Component {
    static get selector() { return 'coreid-outlet' }
    static get template() { return template }
    static get props() { return ['initial_page', 'initial_form_id', 'initial_resource', 'initial_mode'] }

    constructor() {
        super()
        this.navigate_event = event_bus.event('root.navigate')
        this.show = true
        console.log('navigate event', this.navigate_event)
    }

    async vue_on_create() {
        this.page = this.initial_page
        this.form_id = this.initial_form_id
        this.resource = this.initial_resource
        this.mode = this.initial_mode

        this.navigate_event.subscribe((props = {}) => {
            console.log('navigation event', props)
            this.page = props.page
            this.form_id = props.form_id
            this.resource = props.resource
            this.mode = props.mode
            this.rerender()
        })

        this.$forceUpdate()
    }

    rerender() {
        this.show = false
        this.$forceUpdate()
        requestAnimationFrame(() => {
            this.show = true
            this.$forceUpdate()
        })
    }
}