import { client, navigateTo } from "../../index.js";
import { clear, fill_errors } from "../../utils/formUtils.js";
import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js";

async function register()
{
	let username = document.getElementById("username-input").value;
	let password = document.getElementById("password-input").value;
	if (username === '' || password === '') {
		clear("innerHTML", ["username", "password"]);
		if (username === '')
			document.getElementById('username').innerHTML = 'This field may not be blank.';
		if (password === '')
			document.getElementById('password').innerHTML = 'This field may not be blank.';
		return;
	}

	let response_data = await client.account.create(username, password);

	if (response_data == null)
	{
		navigateTo("/home");
		return;
	}

	clear("innerHTML", ["username", "user", "password"]);
	fill_errors(response_data, "innerHTML");
}

export default class extends AbstractNonAuthentifiedView {
    constructor(params) {
        super(params, "Register", "/home");
	}

	async postInit()
	{
		let usernameField = document.getElementById('username-input');
		usernameField.addEventListener('keydown', ev => {
			if (ev.key === 'Enter')
				register();
		});
		usernameField.focus();
		let passwordField = document.getElementById('password-input');
		passwordField.addEventListener('keydown', ev => {
			if (ev.key === 'Enter')
				register();
		});
		document.getElementById("register-button").onclick = register;
	}

    async getHtml() {
        return `
			<div class=form>
				<label>Register</label>
				<link rel="stylesheet" href="/static/css/accounts/register.css">
				<input type="text" id="username-input" placeholder="username">
				<span id="username"></span>
				<input type="password" id="password-input" placeholder="password">
				<span id="password"></span>
				<input type="button" value="Register" id="register-button">
				<span id="user"></span>
				<a href="/login" class="nav__link" data-link>Login</a>
			</div>
        `;
    }
}