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í.');
        this.populateTeamData();
        if (this.node.isNear()) {
            await this.runIfNear();
        }
        this.getView().classList.remove('conquer-display-none')
        mainNode.classList.remove('conquer-display-none')
    }

    private async populateTeamData() {
        const element = document.createElement('p');
        const team = await this.node.getTeam();
        (() => {
            if (team === null) {
                element.innerText = 'El nodo no pertenece a ningún equipo todavía.';
                return;
            }
            const spanText = document.createElement('span');
            spanText.innerText = 'Equipo: ';
            element.append(spanText);
            const spanCircle = document.createElement('span');
            spanCircle.classList.add('conquer-team-circle');
            spanCircle.style.backgroundColor = team.getColor();
            element.append(spanCircle);
            const spanTeamName = document.createElement('span');
            spanTeamName.style.color = team.getColor();
            spanTeamName.innerText = ' ' + team.getName();
            element.append(spanTeamName);
        })();
        this.getView().append(element);
    }

    private async runIfNear(): Promise<void> {
        const userTeam = await this.user.getTeam();
        const nodeTeam = await this.node.getTeam();
        if (userTeam === 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);
        if (await this.isOpposingNode()) {
            const conquerForTeamButton = document.createElement('button');
            conquerForTeamButton.innerText = 'Conquistar';
            conquerForTeamButton.addEventListener('click', () => {
                this.conquerThisNodeForTeam();
            });
            this.getView().append(conquerForTeamButton);
        }
    }

    private async conquerThisNodeForTeam() {
        const urlNode = new URL('/conquer/node/' + this.node.getUUID() + '/try-conquer',
            window.location.protocol + '//' 
            + window.location.hostname + ':' 
            + window.location.port)
        const response = await fetch(urlNode, {
            method: 'POST',
        });
        this.runCallbacks('update-nodes');
        this.runCallbacks('close');
    }

    private async isOpposingNode(): Promise<boolean> {
        const userTeam = await this.user.getTeam();
        const nodeTeam = await this.node.getTeam();
        if (userTeam === null) {
            return false;
        }
        if (nodeTeam === null) {
            return true;
        }
        if (nodeTeam.getUUID() !== userTeam.getUUID()) {
            return true;
        }
        return false;
    }

    private async isNodeFree(): Promise<boolean> {
        return await this.node.getTeam() === null;
    }

}