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

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

export default class MonthSelect extends sfw.element.Container {
	#container
	#month_container

	constructor() {
		super({ css });

		this.onscroll = (e) => e.stopPropagate();
		this.onmonth = () => {};

		this.body.append(
			this.#container = Div.new({
				id: 'container',
				children: [
					Div.new({ id: 'title', innerText: 'Select Month' }),
					Div.new({
						id: 'close-button',
						children: [ icons.close ],
						onclick: () => this.hide(),
					}),
					this.#month_container = Div.new({
						id: 'month-container',
					}),
				],
			}),
		);
	}

	show() {
		this.#container.classList.add('visible');
	}

	hide() {
		this.#container.classList.remove('visible');
	}

	set months(months) {
		months.sort((a, b) => a.is_before(b));

		this.#month_container.innerHTML = '';

		let last = null;

		for (const month of months) {
			if (last != null && !last.is_same_year(month)) {
				this.#month_container.append(
					Div.new({
						className: 'year-item',
						innerText: last.year,
					})
				);
			}

			this.#month_container.append(
				Div.new({
					className: 'month-item',
					innerText: month.name,
					onclick: () => {
						this.hide();
						this.onmonth(month);
					}
				})
			);

			last = month;
		}
	}
}