import Conquer from '@burguillosinfo/conquer'
import ConquerUser from '@burguillosinfo/conquer/user'
import AbstractTopBarInterface from '@burguillosinfo/conquer/interface/abstract-top-bar-interface'

export default class SelfPlayerUI extends AbstractTopBarInterface {
    private selfPlayer: ConquerUser | null = null
    private userWelcome: HTMLElement | null = null

    protected generateNodes(): HTMLElement[] {
        const player =  this.getNodeFromTemplateId('conquer-interface-with-top-bar-template')
        return [player]
    }

    public generateInterfaceElementCentered(): HTMLElement {
        return this.getNodeFromTemplateId('conquer-interface-element-padded-template')
    }

    public async run(): Promise<void> {
        const selfPlayerNode = this.getMainNode()
        selfPlayerNode.classList.remove('conquer-display-none')
        const user =  await ConquerUser.getSelfUser()
        if (user === null) {
            this.runCallbacks('close')
            return
        }
        this.selfPlayer = user
        this.populateWelcome()
        this.populateCreateNodeOption()
    }

    private populateCreateNodeOption() {
        if (!this.selfPlayer?.isAdmin()) {
            return
        }
        const createNodeButton = document.createElement('button')
        createNodeButton.innerText = 'Crear Nuevo Nodo'
        createNodeButton.addEventListener('click', () => {
            this.runCallbacks('createNodeStart')
            // We close because it is a sensible thing to do.
            this.runCallbacks('close')
        })
        const createNodeButtonInterface = this.generateInterfaceElementCentered()
        createNodeButtonInterface.appendChild(createNodeButton)
        this.getMainNode().appendChild(createNodeButtonInterface)
    }

    private populateWelcome(): void {
        const userWelcome = this.getUserWelcome()
        const userWelcomeInterface = this.generateInterfaceElementCentered();
        userWelcomeInterface.appendChild(userWelcome)
        this.getMainNode().appendChild(userWelcomeInterface)
    }

    private getUserWelcome(): HTMLElement {
        if (this.userWelcome !== null) {
            return this.userWelcome 
        }
        const element = document.createElement('h2') 
        if (this.selfPlayer === null) {
            throw new Error('User still not set')
        }
        element.innerText = `¡Hola, ${this.selfPlayer.getUsername()}!`
        this.userWelcome = element
        return this.userWelcome
    }
}