import { Component, Attributes } from "armature";
import * as moment from "moment";

import template from "./index-template";
import * as API from "./API";

import Header from "./Header";
import Body from "./Body";
import EventSummary from "./EventSummary";

import EventStore from "./EventStore";

export interface DayEvent {
	id: number;
	title: string;
	description: string;
	location: string;
	date: number;
	url?: string;
	allDay: boolean;
	calendarTitle: string;
	calendarColor: string;

	// Client-side property
	visible: boolean;
}

interface Day {
	time: moment.Moment;
	events: DayEvent[];
}

interface CalendarState {
	now?: number;
	selected?: moment.Moment;
}

@Attributes({
	tag: "gecko-calendar",
	template
})
export default class GeckoCalendar extends Component<CalendarState> {
	headings = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

	header: Header;
	body: Body;
	eventSummary: EventSummary;

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

		if (!this.state.now) {
			this.state.now = API.momentToMonthNumber(moment.utc());
		}

		this.header = new Header({});

		this.header
			.setLabel("$")
			.setParent(this);

		this.body = new Body({
			zeroPoint: this.state.now
		});

		this.body
			.setLabel("$")
			.setParent(this);

		this.eventSummary = new EventSummary({});

		this.eventSummary
			.setLabel("$")
			.setParent(this);
	}

	protected $onScroll: ((month: number) => void)[] = [];
	onScroll(callback: (month: number) => void) {
		this.$onScroll.push(callback);
	}

	scrollTo(month: number) {
		this.state.now = month;

		this.body.scrollTo(month);
		this.header.scrollTo(month);

		this.$onScroll.forEach(f => f(month));
	}

	scrollLeft() {
		this.scrollTo(this.state.now - 1);
	}

	scrollRight() {
		this.scrollTo(this.state.now + 1);
	}

	showEvents(events: DayEvent[]) {
		this.eventSummary.active = true;
		this.eventSummary.show(events);
	}

	static searchAndLoad() {
		const elements = Array.from(document.querySelectorAll(".gecko-google-calendar__wrapper")) as HTMLElement[];
		const calendars: GeckoCalendar[] = [];

		for (const element of elements) {
			const cal = new GeckoCalendar({});
			cal.attachTo(element);
			cal.reify();

			calendars.push(cal);
		}

		return calendars;
	}
}