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

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

export default class Editable extends sfw.element.Container {
	#label
	#input
	#edit

	constructor() {
		super({ css });

		this.onupdate = () => {};

		this.body.append(
			Div.new({
				id: 'container',
				children: [
					this.#label = Label.new({ htmlFor: 'input' }),
					this.#input = Input.new({
						readOnly: true,
						onkeydown: (e) => {
							if (e.key === 'Enter') {
								this.#input.readOnly = true;
								this.#update()
								this.onupdate();
							}
						},
					}),
					this.#edit = Div.new({
						id: 'edit',
						children: [ icons.edit ],
						onclick: () => {
							this.#input.readOnly = !this.#input.readOnly;
							this.#update();

							if (this.#input.readOnly) {
								this.onupdate();
							}
						}
					}),
				],
			})
		);
	}

	#update() {
		this.#edit.innerHTML = '';
		this.#edit.append(
			this.#input.readOnly ? icons.edit : icons.check
		);

		if (!this.#input.readOnly) {
			this.#input.select();
		}
	}

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

	set value(value) {
		this.#input.value = value;
	}

	get value() {
		return this.#input.value;
	}

	set type(type) {
		this.#input.type = type;
	}
}