import { Component, OnInit, OnDestroy, HostListener } from "@angular/core";
import { ActivatedRoute, UrlSegment, Params, Router } from "@angular/router";
import { map } from "rxjs/operators";
import { DocumentFetchService } from "../services/document-fetch.service";
import { DocumentData } from "../symbols/DocumentData";
import { MarkdownService } from "ngx-markdown";
import { CurrentDocumentService } from "../services/current-document.service";
import { combineLatest } from "rxjs";
import { fwlinkMapper } from "../fwlink-mapper";
import { isObject, isString } from "util";

@Component({
	selector: "app-article",
	templateUrl: "./article.component.html",
	styleUrls: ["./article.component.scss"]
})
export class ArticleComponent implements OnInit, OnDestroy {

	public documentData: DocumentData;

	constructor(
		private activatedRoute: ActivatedRoute,
		private documentFetcher: DocumentFetchService,
		private markdownService: MarkdownService,
		private currentDocumentService: CurrentDocumentService,
		private router: Router
	) { }

	ngOnInit() {
		const urlEvent = this.activatedRoute.url
			.pipe(map((urlSegments: UrlSegment[]) => urlSegments.map(urlSegment => urlSegment.path).join("/")));

		const dataEvent = this.activatedRoute.data
			.pipe(map(data => {
				return {
					resolveUrlPaths: data.resolveUrlPaths === true,
					notFound: data.notFound === true
				};
			}));

		const queryEvent = this.activatedRoute.queryParams
			.pipe(map((params: Params) => isString(params.page) ? params.page : params.p));

		combineLatest(urlEvent, dataEvent, queryEvent)
			.pipe(map((combined) => {
				return {
					url: combined[0],
					queryPage: combined[2],
					resolveUrlPaths: combined[1].resolveUrlPaths,
					notFound: combined[1].notFound,
				};
			}))
			.subscribe(async (data) => {
				let resolvedUrl: string;
				if (!data.notFound) {
					if (data.resolveUrlPaths) {
						resolvedUrl = fwlinkMapper(data.queryPage);
					} else {
						if ((isString(data.url) && data.url.length === 0 || !isString(data.url)) && isString(data.queryPage) && data.queryPage.length > 0) {
							resolvedUrl = data.queryPage;
						} else {
							resolvedUrl = data.url;
						}
					}
				} else {
					resolvedUrl = "404";
				}
				const docData: DocumentData = await this.documentFetcher.fetch(resolvedUrl);
				this.documentData = docData;
				this.currentDocumentService.setCurrentDocument(docData);
			});

	}

	ngOnDestroy() {
		this.currentDocumentService.setCurrentDocument(null);
	}

	@HostListener("click", ["$event"])
	public onClick(e: Event) {
		if (isObject(e.target)) {
			const target = e.target as HTMLLinkElement;
			if (isString(target.dataset.routerlink)) {
				e.preventDefault();
				this.router.navigateByUrl(target.dataset.routerlink);
			}
		}
	}

}