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

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

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

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

    private async populateTeams() {
        const teams = await ConquerTeam.getTeams();
        for (const team of teams) {
            this.populateTeam(team);
        }
    }

    private populateTeam(team: ConquerTeam) {
        const teamDiv = this.getNodeFromTemplateId('conquer-team-to-select-template')
        const nameParagraph = teamDiv.querySelector('p.conquer-name');
        const descriptionParagraph = teamDiv.querySelector('p.conquer-description');
        const submit = teamDiv.querySelector('button.conquer-submit');
        if (!(nameParagraph instanceof HTMLParagraphElement) 
            || !(descriptionParagraph instanceof HTMLParagraphElement) 
            || !(submit instanceof HTMLButtonElement)) {
            Conquer.fail('Select team name inclusive or description container are not correctly defined in template.');
        }
        nameParagraph.innerText = team.getName();
        descriptionParagraph.innerText = team.getDescription();
        nameParagraph.style.color = team.getColor();
        submit.addEventListener('click', async () => {
            this.onSelectTeam(team);
        });
        this.getForm().append(teamDiv);
    }

    private async onSelectTeam(team: ConquerTeam) {
        const urlTeam = new URL('/conquer/user/team',
            window.location.protocol + '//' 
            + window.location.hostname + ':'
            + window.location.port);
        const response = await fetch(urlTeam, {
            method: 'POST',
            body: JSON.stringify({
                team: team.getUUID(),
                node: this.node.getUUID(),
            }),
        });
        let responseBody;
        try {
            responseBody = await response.json();
            if (response.status !== 200) {
                console.error(responseBody.error);
                return;
            }
            this.runCallbacks('close')
        } catch (error) {
            console.error('Error parsing json', error);
        }
    }

    private getForm(): HTMLElement {
        if (this.form === null) {
            const form = this.getNodeFromTemplateId('conquer-select-team-list-template')
            this.form = form;
        }
        return this.form;
    }
}