import { Component, OnInit, Input } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { HttpClient } from '@angular/common/http';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { PublicationService } from 'src/app/core/services/publication-service/publication.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { ExpandService } from '../../../core/services/expand-service/expand.service';

type RichTextColor =  'text-white' | 'text-darker-green-grey';
interface TabelData {
	body;
	footer;
}

@Component({
	selector: 'rich-text-field',
	templateUrl: './rich-text-field.component.html',
	styleUrls: ['./rich-text-field.component.scss']
})
export class RichTextFieldComponent implements OnInit {

	@Input() body;
	@Input() textColor: string;

	color: RichTextColor = 'text-darker-green-grey';

	/*
		This id is used to have a unique (hopefully) name for the modal window
		to not cause issue if multiple modal links are added on the same page
	*/
	id = this.idGenerator.getId();

	// These two are set when a user clicks on a link that should open a modal
	modalContentSrc: string;
	modalContentText = '';
	modalType: 'IMAGE' | 'TABLE';
	tableData: TabelData;

	constructor(
		private modalService: NgbModal,
		private http: HttpClient,
		private util: UtilService,
		private publicationService: PublicationService,
		private idGenerator: IdGeneratorService,
		private expandService: ExpandService
	) { }

	ngOnInit() {
		this.color = this.resolveColor();
	}

	// Handles anchor refs and scrolls to the linked element.
	public anchorClick(event, templateRef) {
		const href = event.target.getAttribute('href');

		// handle only hrefs to internal links
		if ( href && href.charAt(0) === '#') {

			const anchor = href.substring(1);
			const element = document.getElementById(anchor);
			
			if (element) {
				const card = element.closest('.card');
				
				// For body text expandable we need to open the accordion before scrolling.
				if (card) {
					const cardHeader = card.querySelector('.card-header');
					const accordionId = cardHeader.getAttribute('id').replace('-header', '');
					this.expandService.openAccordion(accordionId);
				}
				
				element.scrollIntoView({ behavior: 'smooth' });
			}
			return false;
		}


		const tagThatWasClicked = event.target.closest('.modal-window');
		if (tagThatWasClicked !== null) {
			// Don't follow the link that was clicked
			event.preventDefault();
			this.modalContentSrc = tagThatWasClicked.href;

			// If href contains tcm-id, set modal type to Table, otherwise Image
			if (this.modalContentSrc.startsWith('tcm:')) {
				this.modalType = 'TABLE';
				this.modalContentSrc = this.modalContentSrc.split('-')[1];
				// Get table data
				this.http.get(`/content${this.publicationService.getPublicationPath()}/dynamicComponent?itemId=${this.modalContentSrc}`).toPromise().then(res => {
					this.tableData = {
						body: this.util.extract(res, 'Content', 'table'),
						footer: this.util.extract(res, 'Content', 'footnotes')
					};

					this.modalContentText = tagThatWasClicked.text + ' - ' + (this.util.extract(res, 'Content', 'title') || '');
				});
			} else {
				this.modalType = 'IMAGE';
				this.modalContentText = tagThatWasClicked.text + ' - ' + tagThatWasClicked.title;
			}

			this.openModal(templateRef);
		}

	}

	// Passed the template ref that is set the html template
	private openModal(templateRef): void  {
		this.modalService.open(templateRef, { windowClass: 'modal-60-percent', size: 'lg', centered: true });
	}

	private resolveColor(): RichTextColor {
		switch (this.textColor) {
			case 'white': return 'text-white';
			case 'darker-green-grey': return 'text-darker-green-grey';
		}
		return 'text-darker-green-grey';
	}

}