import * as api from 'api';
import icons from 'icons';
import * as sfw from 'sfw';
const { Div, Input } = sfw.element.native;

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

export default class PasswordDialog extends sfw.element.Container {
	#current
	#new
	#confirm
	#error

	constructor() {
		super({ css });

		this.callclose = () => this.close();

		document.body.addEventListener('click', this.callclose);
		this.onclick = (e) => e.stopPropagation();

		this.body.append(Div.new({
			id: 'container',
			children: [
				Div.new({ id: 'title', innerText: 'Change Password' }),
				Div.new({ id: 'close', children: [ icons.close ], onclick: () => this.close() }),
				this.#current = Input.new({ placeholder: 'Current Password', type: 'password' }),
				this.#new = Input.new({ placeholder: 'New Password', type: 'password' }),
				this.#confirm = Input.new({ placeholder: 'Confirm Password', type: 'password' }),
				this.#error = Div.new({ id: 'error', className: 'hidden' }),
				Div.new({
					id: 'button',
					innerText: 'Update',
					onclick: async () => {
						if (this.#new.value !== this.#confirm.value) {
							this.#error.innerText = 'Passwords do not match';
							this.#error.className = '';
							return;
						}

						if (!await api.profile.update_password(this.#current.value, this.#new.value)) {
							this.#error.innerText = 'invalid password';
							this.#error.className = '';
							return;
						}

						this.close();
					},
				}),
			],
		}));
	}

	close() {
		this.parentNode.removeChild(this);
		document.body.removeEventListener('click', this.callclose);
	}
}