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

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

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

export default class MainView extends sfw.element.Container {
	#active_kind
	#active_button
	#active_view
	#bar

	static Kind = Object.freeze({
		'upload': 0,
		'home': 1,
	});

	constructor() {
		super({ css });

		this.onsearch = () => {}
		this.onmonth = () => {}
		this.onupload = () => {}
		this.onshuffle = () => {}
		this.onhome = () => {}

		this.body.append(
			this.#active_view = Div.new({ id: 'main' }),

			this.#bar = Div.new({
				id: 'bar',
				children: [
					Div.new({
						className: 'menu-button',
						children: [ icons.search ],
						onclick: (e) => {
							e.stopPropagation();
							this.onsearch();
						}
					}),

					Div.new({
						className: 'menu-button',
						children: [ icons.calendar ],
						onclick: () => this.onmonth(),
					}),

					this.#active_button = Div.new({
						className: 'menu-button add',
						children: [ icons.add ],
						onclick: () => this.onupload()
					}),

					Div.new({
						className: 'menu-button',
						children: [ icons.shuffle ],
						onclick: () => this.onshuffle(),
					}),

					Div.new({
						className: 'menu-button',
						children: [ icons.settings ],
						onclick: () => this.onsettings(),
					}),
				],
			}),
		);
	}

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

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

	set active_view(element) {
		this.#active_view.innerHTML = '';
		this.#active_view.append(element);
	}

	set active_kind(kind) {
		if (kind == MainView.Kind.home) {
			this.#active_button.innerHTML = '';
			this.#active_button.append(icons.home);
			this.#active_button.onclick = () => this.onhome();
		} else if (kind == MainView.Kind.upload) {
			this.#active_button.innerHTML = '';
			this.#active_button.append(icons.add);
			this.#active_button.onclick = () => this.onupload();
		} else {
			console.error(`invalid kind ${kind}`);
		}
	}
}