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

export default class NodeView extends AbstractTopBarInterface {
    private node: MapNode;
    private user: ConquerUser;
    private view: HTMLElement | null = null;

    public getNode(): MapNode {
        return this.node;
    }

    private getNodeNameH2(): HTMLElement {
        const element = this.getMainNode().querySelector('h2.node-name');
        if (!(element instanceof HTMLElement)) {
            Conquer.fail('h2.node-name is not a H2 or does not exist.');
        }
        return element;
    }

    private getView(): HTMLElement {
        if (this.view === null) {
            const view = this.getNodeFromTemplateId('conquer-view-node-template')
            this.view = view;
        }
        return this.view;
    }


    private getNodeDescriptionParagraph(): HTMLElement {
        const element = this.getMainNode().querySelector('p.node-description');
        if (!(element instanceof HTMLElement)) {
            Conquer.fail('p.node-description is not a P or does not exist.');
        }
        return element;
    }

    constructor(node: MapNode) {
        super()
        this.node = node; 
    }

    public async run() {
        const user = await ConquerUser.getSelfUser();
        if (user === null) {
            this.runCallbacks('close');
            return;
        }
        this.user = user;
        const mainNode = this.getMainNode()
        this.runCallbacks('update-nodes');
        try {
            this.node = await this.node.fetch();
        } catch (error) {
            this.runCallbacks('close');
        }
        mainNode.append(this.getView())
        this.getNodeNameH2().innerText = this.node.getName();
        this.getNodeDescriptionParagraph().innerText = this.node.getDescription() 
            + "\n" 
            + (this.node.isNear() 
                ? 'Estas cerca y puedes interactuar con este sitio.'
                : 'Estás demasiado lejos para hacer nada aquí.');
        if (this.node.isNear()) {
            await this.runIfNear();
        }
        this.getView().classList.remove('conquer-display-none')
        mainNode.classList.remove('conquer-display-none')
    }

    private async runIfNear(): Promise<void> {
        const team = await this.user.getTeam();
        if (team === null) {
            const paragraphNoTeam = document.createElement('p');
            paragraphNoTeam.innerText = 'Parece que no has seleccionado equipo aun,'
                + ' pulsa el botón de seleccionar equipo para comenzar tu aventura,'
                + ' si quieres cambiar de equipo en el futuro puedes hacerlo sin problemas.';
            this.getView().append(paragraphNoTeam);
        }
        const selectTeamButton = document.createElement('button');
        selectTeamButton.innerText = 'Seleccionar equipo';
        selectTeamButton.addEventListener('click', () => {
            this.runCallbacks('open-select-team');
            this.runCallbacks('close');
        });
        this.getView().append(selectTeamButton);
    }

}