import { Component, OnInit, OnDestroy } from "@angular/core";
import { ActivatedRoute, UrlSegment } 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";

@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
		) { }

	ngOnInit() {
		this.activatedRoute.url
		.pipe(map((urlSegments: UrlSegment[]) => urlSegments.map(urlSegment => urlSegment.path).join("/")))
		.subscribe(async (url: string) => {
			const docData: DocumentData = await this.documentFetcher.fetch(url);
			this.documentData = docData;
			this.currentDocumentService.setCurrentDocument(docData);
		});

	}

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

}