import { Component, Attributes } from "armature";

import GeckoCalendar from "./";
import * as API from "./API";
import template from "./Header-template";

@Attributes({
	tag: "header",
	template
})
export default class Header extends Component<any> {
	parent: GeckoCalendar;

	scrollTo(month: number) {
		const now = API.monthNumberToMoment(month);
		const el = this.element.querySelector(".now");
		el.innerHTML = now.format("MMMM, YYYY");
	}

	installed() {
		super.installed();

		const left = this.element.querySelector("a.left");
		left.addEventListener("click", e => {
			e.preventDefault();

			this.parent.scrollLeft();
		});

		const right = this.element.querySelector("a.right");
		right.addEventListener("click", e => {
			e.preventDefault();

			this.parent.scrollRight();
		});
	}
}