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

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

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

	constructor() {
		super({ css });

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

		this.#user = null;

		this.body.append(
			this.#container = Div.new({
				id: 'container',
				children: [
					Div.new({ id: 'title', innerText: 'Memora' }),
					this.#user = Div.new({
						id: 'username',
						onclick: () => this.#reset(),
					}),
					Div.new({
						id: 'box',
						children: [
							this.#input = Input.new({
								placeholder: 'Username',
								onkeydown: (e) => {
									if (e.key === 'Enter') {
										return this.#next();
									}
								},
							}),
							Button.new({
								children: [ icons.next ],
								onclick: () => this.#next(),
							}),
						]
					}),
					this.#comment = Div.new({
						id: 'comment',
						onclick: () => this.#reset(),
					}),
					Div.new({
						id: 'subtitle',
						innerText: 'Where nostalgia is home.',
					}),
				]
			})
		);
	}

	async #next() {
		if (this.#input.value === '') return;

		if (this.#user.innerText) {
			await this.onlogin(this.#user.innerText, this.#input.value);
			this.#user.innerText = '';
			this.#input.value = '';
			this.#input.placeholder = 'Username';
			this.#input.type = 'text';
		} else {
			await this.onpassword(this.#input.value);
			this.#user.innerText = this.#input.value;
			this.#input.value = '';
			this.#input.placeholder = 'Password';
			this.#input.type = 'password';
		}
	}

	#reset() {
			this.#user.innerText = '';
			this.#input.value = '';
			this.#input.placeholder = 'Username';
			this.#input.type = 'text';
	}

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

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

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

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