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

export default class NewTeamUI extends AbstractTopBarInterface {
    public getSubmitButton(): HTMLElement {
        const submitButton = this.getMainNode().querySelector('button.new-team-form-submit') 
        if (submitButton === null || !(submitButton instanceof HTMLElement)) {
            Conquer.fail('SubmitButton is null');
        }
        return submitButton;
    }
    public getErrorElement(): HTMLElement {
        const errorElement = this.getMainNode().querySelector('p.conquer-error');
        if (errorElement === null || !(errorElement instanceof HTMLElement)) {
            Conquer.fail('No error element set');
        }
        return errorElement;
    }
    public getInputTeamName(): HTMLInputElement {
        const teamName = this.getMainNode().querySelector('input.conquer-team-name');
        if (teamName === null || !(teamName instanceof HTMLInputElement)) {
            Conquer.fail('TeamName is null');
        }
        return teamName;
    }
    public getInputTeamColor(): HTMLInputElement {
        const teamColor = this.getMainNode().querySelector('input.conquer-team-color');
        if (teamColor === null || !(teamColor instanceof HTMLInputElement)) {
            Conquer.fail('TeamColor is null');
        }
        return teamColor;
    }
    public getTextareaTeamDescription(): HTMLTextAreaElement {
        const teamDescription = this.getMainNode().querySelector('textarea.conquer-team-description')
        if (teamDescription === null || !(teamDescription instanceof HTMLTextAreaElement)) {
            Conquer.fail('TeamDescription is null');
        }
        return teamDescription
    }

    constructor() {
        super()
    }

    public run() {
        const mainNode = this.getMainNode()
        const form = this.getNodeFromTemplateId('conquer-new-team-form-creation-template')
        mainNode.append(form)
        this.getSubmitButton().addEventListener('click', (event) => {
            event.preventDefault();
            this.onSubmit();
        });
        form.classList.remove('conquer-display-none')
        mainNode.classList.remove('conquer-display-none')
    }

    private setError(error: string): void {
        const errorElement = this.getErrorElement();
        errorElement.classList.remove('conquer-display-none')
        errorElement.innerText = error
    }

    private onSubmit(): void {
        const inputTeamName           = this.getInputTeamName();
        const textareaTeamDescription = this.getTextareaTeamDescription();
        const inputTeamColor          = this.getInputTeamColor();
        const name                    = inputTeamName.value;
        const description             = textareaTeamDescription.value;
        const color                   = inputTeamColor.value;
        if (name.length < 5) {
            this.setError('Todos los equipos deben tener un nombre mayor a 4 caracteres.');
            return;
        }
        const urlTeam = new URL('/conquer/team', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
        fetch(urlTeam, {
            method: 'PUT',
            body: JSON.stringify({
                description : description,
                name        : name,
                color       : color,
            }),
        }).then(async (res) => {
            let responseBody;
            try {
                responseBody = await res.json();
            } catch (error) {
                this.setError( 'Respuesta erronea del servidor.');
                return;
            }
            if (res.status !== 200) {
                this.setError(responseBody.error);
                return;
            }
            this.runCallbacks('close')
        });
    }
}