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

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 {
	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: [
									Img.new({
										src: '/images/0010.jpg',
									}),
								]
							}),
							Div.new({
								id: 'edit',
								children: [ icons.edit ]
							}),
						]
					}),
					Editable.new({
						title: 'Name',
						value: 'Nathan Reiner'
					}),
					Editable.new({
						title: 'Birthday',
						type: 'date',
						value: '2002-08-06',
					}),
					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' }),
						]
					}),
				]
			})
		)
	}
}