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

export default class NewNodeUI extends AbstractTopBarInterface {
    private coordinates: number[];
    public getSubmitButton(): HTMLElement {
        const submitButton = this.getMainNode().querySelector('button.new-node-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 getSelectNodeType(): HTMLSelectElement {
        const selectElement = this.getMainNode().querySelector('select.conquer-node-type');
        if (selectElement === null || !(selectElement instanceof HTMLSelectElement)) {
            Conquer.fail('SelectElementNodeType is null');
        }
        return selectElement
    }
    public getInputNodeName(): HTMLInputElement {
        const nodeName = this.getMainNode().querySelector('input.conquer-node-name')
        if (nodeName === null || !(nodeName instanceof HTMLInputElement)) {
            Conquer.fail('NodeName is null');
        }
        return nodeName
    }
    public getTextAreaNodeDescription(): HTMLTextAreaElement {
        const nodeDescription = this.getMainNode().querySelector('textarea.conquer-node-description')
        if (nodeDescription === null || !(nodeDescription instanceof HTMLTextAreaElement)) {
            Conquer.fail('NodeDescription is null');
        }
        return nodeDescription
    }
    constructor(coordinates: number[]) {
        super()
        this.coordinates = coordinates
    }
    public run() {
        const mainNode = this.getMainNode()
        const form = this.getNodeFromTemplateId('conquer-new-node-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 selectNodeType = this.getSelectNodeType();
        const inputNodeName = this.getInputNodeName();
        const textAreaNodeDescription = this.getTextAreaNodeDescription();
        const description = textAreaNodeDescription.value;
        const nodeName = inputNodeName.value;
        const selectedOptionsNodeType = selectNodeType.selectedOptions;
        if (selectedOptionsNodeType.length < 1) {
            this.setError('Debes selecionar un tipo de nodo.');
            return;
        }
        const selectedOptionNodeType = selectedOptionsNodeType[0];
        const nodeType = selectedOptionNodeType.value;
        if (nodeName.length < 5) {
            this.setError('Todos los nodos deben tener un nombre mayor a 4 caracteres.');
            return;
        }
        const urlNode = new URL('/conquer/node', window.location.protocol + '//' + window.location.hostname + ':' + window.location.port)
        fetch(urlNode, {
            method: 'PUT',
            body: JSON.stringify({
                description: description,
                name: nodeName,
                type: nodeType,
                coordinates: this.coordinates,
            }),
        }).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')
        });
    }
}