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

import * as api from '../../api/index.js';

import Editable from '../../widgets/editable/index.js';

import icons from '../../icons/index.js';

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

export default class SettingsView extends sfw.element.Container {
	#profile_image
	#name
	#birthday

	#profile

	constructor() {
		super({ css });
		
		this.onlogout = () => {};

		this.body.append(
			Div.new({
				id: 'container',
				children: [
					Div.new({
						id: 'profile-image',
						children: [
							Div.new({
								id: 'image-container',
								children: [
									this.#profile_image = Img.new(),
								]
							}),
							Div.new({
								id: 'edit',
								children: [ icons.edit ],
								onclick: async () => {
									const uploader = await api.images.upload_to_profile(this.#profile.name);
									uploader.ondone = async () => {
										const blob = await fetch(
											`/api/profile/image/load/${this.#profile.name}`,
											{cache: 'reload', mode: 'no-cors'}
										).then(r => r.blob());

										this.#profile_image.src = URL.createObjectURL(blob);
									};
									uploader.send()
								}
							}),
						]
					}),
					this.#name = Editable.new({
						title: 'Name',
						value: '',
						onupdate: () => this.#update(),
					}),
					this.#birthday = Editable.new({
						title: 'Birthday',
						type: 'date',
						value: '',
						onupdate: () => this.#update(),
					}),
					Div.new({
						id: 'logout',
						innerText: 'Logout',
						onclick: () => this.onlogout(),
					}),
					Div.new({
						id: 'info-box',
						children: [
							Div.new({ id: 'name', innerText: 'Memora' }),
							Div.new({ id: 'version', innerText: '0.0.1-unstable' }),
						]
					}),
				]
			})
		)
	}

	#update() {
		api.profile.set(this.#name.value, this.#birthday.value);
	}

	set profile(profile) {
		this.#profile = profile;

		this.#profile_image.src = `/api/profile/image/load/${profile.name}`;
		this.#profile_image.onerror = () => this.#profile_image.removeAttribute('src');

		this.#name.value = profile.full_name;
		this.#birthday.value = profile.birthday;
	}

	get profile() {
		return this.#profile;
	}
}