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

export default class extends AbstractNonAuthentifiedView
{
	constructor(params, lastUrlBeforeLogin = '/home')
	{
        super(params, lang.get('loginWindowTitle', 'Login'), lastUrlBeforeLogin);
		this.redirectTo = lastUrlBeforeLogin;
		this.current_mode = undefined
	}

	/**
	 * @returns {Promise}
	 */
	async postInit()
	{
		let element = document.getElementById("toogle-register-login");

		element.onclick = this.toogle_register_login.bind(this);
	
		let new_mode = location.pathname.slice(1);
		this.update_mode(new_mode);

		document.getElementById("button").onclick = this.authentificate.bind(this);
	}

	/**
	 * Check if field is normal
	 * @returns {null | Object<String>}
	 */
	basic_verif()
	{
		let username = document.getElementById('username-input').value;
		let password = document.getElementById('password-input').value;

		if (username === '')
			document.getElementById('username').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');

		if (password === '')
			document.getElementById('password').innerHTML = lang.get('errorEmptyField', 'This field may not be blank.');
		
		if (username === '' || password === '')
			return null;

		return { username, password };
	}

	/**
	 * @returns { undefined }
	 */
	toogle_register_login(event)
	{
		event.preventDefault();

		let new_mode = this.current_mode === "register" ? "login" : "register";

		this.update_mode(new_mode);
	}

	/**
	 * @param {String} new_mode 
	 */
	update_mode(new_mode)
	{
		if (new_mode === this.current_mode)
			return;

		this.current_mode = new_mode;

		let title = document.getElementById("title"),
			username_label = document.getElementById("username-label"),
			password_label = document.getElementById("password-label"),
			toogle_register_login = document.getElementById("toogle-register-login"),
			toogle_register_login_label = document.getElementById("toogle-register-login-label"),
			button = document.getElementById("button")
			;

		let title_text = this.current_mode === "register" ? "registerFormTitle" : "loginFormTitle"; 
		title.innerText = lang.get(title_text, "ERROR LANG");

		let username_label_text = this.current_mode === "register" ? "registerFormUsername" : "loginFormUsername"; 
		username_label.innerText = lang.get(username_label_text, "ERROR LANG");

		let password_label_text = this.current_mode === "register" ? "registerFormPassword" : "loginFormPassword"; 
		password_label.innerText = lang.get(password_label_text, "ERROR LANG");

		let toogle_register_login_label_text = this.current_mode === "register" ? "registerAlreadyAccount" : "loginNoAccount";
		toogle_register_login_label.innerText = lang.get(toogle_register_login_label_text, "ERROR LANG");;

		let toogle_register_login_text = this.current_mode === "register" ? "registerLogin" : "loginRegister";
		toogle_register_login.innerText = lang.get(toogle_register_login_text, "ERROR LANG");

		let button_text = this.current_mode === "login" ? "loginFormButton" : "registerFormButton";
		button.innerText = lang.get(button_text, "ERROR LANG");

		history.pushState(null, null, `/${this.current_mode}`);
	}

	/**
	 * @returns {Promise}
	 */
	async authentificate()
	{
		let ret = this.basic_verif();

		if (ret === null)
			return

		let {username, password} = ret;

		let response_data;

		if (this.current_mode === "register")
			response_data = await client.account.create(username, password) 
		else
			response_data = await client.login(username, password);

		if (response_data !== null)
		{
			navigateTo(this.redirectTo);
			return;
		}
	
		clear("innerHTML", ["username", "password", 'register']);
		fill_errors(response_data, "innerHTML");

	}

	async getHtml()
	{
        return /* HTML */ `
			<link rel="stylesheet" href="/static/css/authentify.css">

			<div class='container-fluid'>
				<form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
					<h4 class='text-center fw-semibold mb-4' id="title">Loading...</h4>
					<div class='form-floating mb-2'>
						<input type='text' class='form-control' id='username-input' placeholder='Username'>
						<label for='usernameInput' id='username-label'>Loading...</label>
						<span class='text-danger' id='username'></span>
					</div>
					<div class='form-floating'>
						<input type='password' class='form-control' id='password-input' placeholder='Password'>
						<label for='password-input' id='password-label'>Loading...</label>
						<span class='text-danger' id='password'></span>
					</div>
					<div class='d-flex'>
						<button type='button' class='btn btn-primary mt-3 mb-2' id='button'>Loading...</button>
						<span class='text-danger my-auto mx-2' id='register'></span>
						<div class='ms-auto mt-auto flex-row d-flex gap-2' id="toogle">
							<p id='toogle-register-login-label'>Loading...</p>
							<a id="toogle-register-login" href='#'>Loading...</a>
						</div>
					</div>
				</form>
			</div>
        `;
	}
}