import icons from 'icons';
import * as sfw from 'sfw';
const { Div, Label, H1: Title, Input, Button, Form } = sfw.element.native;

const css = await sfw.css(import.meta.url, './index.css');

export default class LoginView extends sfw.element.Container {
	#container
	#user
	#username
	#password
	#comment

	constructor() {
		super({ css });

		this.onlogin = () => {};
		this.onpassword = () => {};

		this.body.append(
			this.#container = Div.new({
				id: 'container',
				children: [
					Div.new({ id: 'title', innerText: 'Memora' }),
					this.#user = Div.new({
						id: 'username-label',
						onclick: () => this.#reset(),
					}),
					Form.new({
						id: 'box',
						onsubmit: (e) => e.preventDefault(),
						children: [
							this.#username = Input.new({
								id: 'username',
								placeholder: 'Username',
								autocomplete: 'username',
							}),
							this.#password = Input.new({
								id: 'password',
								placeholder: 'Password',
								autocomplete: 'current-password',
								type: 'password',
								style: { display: 'none' },
								onkeydown: (e) => {
									if (e.key === 'Enter') {
										return this.#login();
									}
								},
							}),
							Button.new({
								id: 'submit',
								children: [ icons.next ],
								onclick: () => this.#next(),
							}),
						]
					}),
					this.#comment = Div.new({
						id: 'comment',
						onclick: () => this.#reset(),
					}),
					Div.new({
						id: 'subtitle',
						innerText: 'Where nostalgia is home.',
					}),
				]
			})
		);
	}

	#next() {
		if (this.#username.style.display != 'none') {
			this.#go_to_password();
		} else {
			this.#login();
		}
	}

	#go_to_password() {
		if (this.#username.value === '') return;

		this.#user.innerText = this.#username.value;
		this.#username.style.display = 'none';
		this.#password.style.display = '';
		this.#password.focus();
	}

	async #login() {
		await this.onlogin(this.#username.value, this.#password.value);
		this.#reset();
	}

	#reset() {
		this.#user.innerText = '';
		this.#username.value = '';
		this.#password.value = '';
		this.#username.style.display = '';
		this.#password.style.display = 'none';
	}

	set comment(value) {
		this.#comment.innerText = value;
	}

	show() {
		this.#container.classList.remove('hidden');
		this.focus();
	}

	hide() {
		this.#container.classList.add('hidden');
	}

	focus() {
		this.#username.focus();
	}
}