import { Component, Attributes } from "armature";
import { $html, $each, $if } from "ekma"
import * as moment from "moment";

import { DayEvent } from "./";
import * as API from "./API";

const template = (summary: EventSummary) => {
	if (summary.active) {

		if (summary.events.length === 0) {
			return noResultsTemplate(summary);
		}

		return activeTemplate(summary);

	} else {
		return inactiveTemplate(summary);
	}
};

const inactiveTemplate = (summary: EventSummary) => $html`
	<div class="inactive">
		Select a day to view events.
	</div>
`;

const noResultsTemplate = (summary: EventSummary) => $html`
	<div class="events">
		<div class="event">
			<div class="details">
				<h1 class="title">No events found</h1>
			</div>
		</div>
	</div>
`;

const activeTemplate = (summary: EventSummary) => $html`
	<div class="events">
		<span class="sr-only">Events On: ${moment.unix(summary.events[0].date).utc().format("MMMM-DD") }</span>
		${ $each(summary.events, (event: DayEvent) => $html`
			<a class="event" href="${ event.url }" target="_blank" role="section">
				<div class="details">
					$${ event.title ? `<h1 class="title">${ event.title }</h1>` : "" }
					<ul>
						$${ event.date ? `<li class="time">${ moment.unix(event.date).utc().format("h:mma") }</li>` : "" }
						$${ event.location ? `<li class="location">${ event.location }</li>` : "" }
						$${ event.url ? `<li class="goto">Go to Event</li>` : "" }
					</ul>
				</div>
			</a>
		`) }
	</div>
`;

@Attributes({
	tag: "event-summary",
	template
})
export default class EventSummary extends Component<any> {
	active = false;
	events: DayEvent[] = [];

	show(events: DayEvent[]) {
		this.events = events.filter(v => v.visible);
		this.reify();
	}
}