import { Component, Attributes } from "armature";
import { $html } from "ekma";

import * as moment from "moment";
import * as API from "./API";

import { DayEvent } from "./";
import Month from "./Month";

// The maximum number of events that are represented in indicators
// This should be the highest number data-indicator can be
const MAX_EVENT_REPRESENTED = 99;

const template = (day: CalendarDay) => $html`
	<div class="day"><span class="sr-only">See events for ${ API.monthNumberToMoment(day.state.month)
			.date(day.state.date).format('dddd MMMM') }</span>${ day.state.date.toString() }</div>
	<div class="indicator"></div>
`;

interface State {
	month: number;
	date: number;
	events?: DayEvent[];
}

@Attributes({
	tag: "calendar-day",
	classes: ["current"],
	template
})
export default class CalendarDay extends Component<State> {
	parent: Month;

	constructor(state: State) {
		super(state);

		if (!this.state.events) {
			this.state.events = [];
		}
	}

	addEvent(event: DayEvent) {
		this.state.events.push(event);
		this.reify();
	}

	getIndicator(count: number) {
		return Math.min(count, MAX_EVENT_REPRESENTED).toString();
	}

	installed() {
		super.installed();

		// Workaround for installed() not working with root click handlers
		if (this.element.getAttribute("data-arm-root-installed") == null) {
			this.element.setAttribute("data-arm-root-installed", "");

			this.element.setAttribute("tabindex", "0");
			this.element.setAttribute("aria-selected", "false");

			this.element.addEventListener("click", () => {
				this.selectDay();
			});

			this.element.addEventListener("keydown", (e) => {
				if (e.keyCode === 13 || e.keyCode === 32) {
					this.selectDay();

					this.highlightEvents();
				}


			});
		}

		const visibleEvents = this.state.events.filter(v => v.visible);

		if (visibleEvents.length > 0) {
			this.element.querySelector('.indicator').setAttribute("data-indicator", this.getIndicator(this.state.events.length));
		}

	}

	selectDay() {
		this.parent.selectDay(this);

		this.element.setAttribute("aria-selected", "true");

		const time = API.monthNumberToMoment(this.state.month)
			.date(this.state.date);
	}

	highlightEvents() {
		const eventsList = document.querySelectorAll("event-summary .events .event");

		if (eventsList.length > 0) {
			const el : any = eventsList[0];
			el.focus();
		}
	}

	markSelected() {
		this.element.setAttribute("data-selected", "");
	}

	markDeselected() {
		this.element.removeAttribute("data-selected");
	}
}