// Приколы
const audios = document.querySelectorAll('.audio') as NodeListOf<HTMLAudioElement>;
const audioButtons = document.querySelectorAll('.audioButton');

audioButtons.forEach((audioButton, index) => {
    audioButton.addEventListener('click', () => audios[index].play());
});

let zIndex = 100;

const windowDragHandler = (_window: HTMLDivElement) => {
    const closeButton = _window.querySelector('.close');
    if (closeButton) {
        closeButton.addEventListener('click', () => _window.remove());
    }

    const windowTitle = _window.querySelector<HTMLDivElement>('.window-title');

    windowTitle.addEventListener('dragstart', (e) => e.preventDefault());
    windowTitle.addEventListener('mousedown', (event) => {
        let shiftX = event.clientX - windowTitle.getBoundingClientRect().left;
        let shiftY = event.clientY - windowTitle.getBoundingClientRect().top;

        _window.style.zIndex = String(++zIndex);

        const moveAt = (pageX: number, pageY: number) => {
            _window.style.left = pageX - shiftX + 'px';
            _window.style.top = pageY - shiftY + 'px';
        }

        moveAt(event.pageX, event.pageY);

        const moveF = (event: MouseEvent) => moveAt(event.pageX, event.pageY);
        document.addEventListener('mousemove', moveF);

        windowTitle.onmouseup = () => {
            document.removeEventListener('mousemove', moveF);
            windowTitle.onmouseup = null;
        };
    })
};

document.querySelectorAll<HTMLDivElement>('.window').forEach(w => windowDragHandler(w));

// Не приколы
interface ApiRequest {
    x: number;
    y: number;
    r: number;
}
let request: ApiRequest = {
    x: 0,
    y: 0,
    r: 1,
}

document.querySelectorAll('.form-x-input').forEach((input: HTMLInputElement) => {
    input.addEventListener('change', (event: Event) => {
        request.x = Number(input.value);
    });
});

const yInput = document.querySelector<HTMLInputElement>('#form_y');
yInput.addEventListener('change', (event: Event) => {
    request.y = Number(yInput.value);
    if (!isNaN(request.y)) {
        request.y = Math.min(5, Math.max(-3, request.y));
        yInput.value = String(request.y);
    }
});

const rButtons = document.querySelectorAll<HTMLButtonElement>('.form-r-button');
rButtons.forEach((button: HTMLButtonElement) => {
    button.addEventListener('click', (event: Event) => {
        request.r = Number(button.value);
        rButtons.forEach((_button: HTMLButtonElement) => {_button.classList.remove('active')});
        button.classList.add('active');
    });
});

const showError = (errorText: string) => {
    document.querySelector<HTMLAudioElement>('#error_sound').play();
    const _window = document.createElement('div');
    _window.classList.add('window');
    _window.style.zIndex = String(500);
    _window.style.left = "35%";
    _window.style.top = "35%";
    _window.innerHTML = `
            <div class="window-title">
              <span>Ошибка</span>
              <span class="button close">X</span>
            </div>
            <div class="window-body">
              <div class="error">
                <img src="images/error.png" alt="Error Icon"/>
                <p>${errorText}</p>
              </div>
            </div>`;
    windowDragHandler(_window);
    document.querySelector<HTMLDivElement>('.work-area').append(_window);
}

const form = document.querySelector('#form');
form.addEventListener('submit', e => {
    e.preventDefault();
    if (isNaN(request.y)) {
        showError('Ошибка, проверьте, что Y это число')
        return;
    }

    const params = new URLSearchParams({
        x: String(request.x),
        y: String(request.y),
        r: String(request.r),
    });
    const response = fetch(`/ipa/cgi.jar?${params.toString()}`);
    response.then(response => {
        if (response.status !== 200) {
            showError("Ошибка при обработке запроса. Пожалуйста, попробуйте позже");
            return;
        }
        response.text().then(
            html => {
                const element = document.createElement('tr');
                element.innerHTML += html;
                if (response.headers.get('X-Gol') === 'no') element.classList.add('grey');
                document.querySelector("#results").append(element);
            }
        )
    });
});