import { Component, Input, OnInit, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap';
import { ViewChild } from '@angular/core';
import { ExpandService } from 'src/app/core/services/expand-service/expand.service';
interface ExpandableBodyTextData {
	title: any;
	id: string;
	bodyText: any;
}

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

	@Input() entity;
	bodyTexts: ExpandableBodyTextData[] = [];
	firstBody;	// First body text which should be non-collapsable
	bodyTextId = this.idGenerator.getId();

	@HostBinding('class') get class() { return 'col-md-8 space-between'; }
	@ViewChild('expandable') bodyTextAccordion: NgbAccordion;

	constructor(
		private util: UtilService,
		private idGenerator: IdGeneratorService,
		private expandService: ExpandService
	) {}

	ngOnInit(): void {
		const bodyTextList = this.util.extract(this.entity, 'EmbeddedBodytext');
		this.bodyTexts = this.parseRTF(bodyTextList);

		this.expandService.expandObs.subscribe(id => {
			this.bodyTextAccordion.expand(id);

			const accordion = document.querySelector(`#${id}`);
			// Wait for accordion to open.
			setTimeout(() => {
				accordion.scrollIntoView({ behavior: 'smooth' });
			}, 1);
		});
	}
		// Parse RTF field and extract title value
	public parseRTF(bodyTextList) {
		bodyTextList = bodyTextList.map((bodyText, index) => {
			const rtf = this.util.extract(bodyText, 'BodyText') || '';
			const parser = new DOMParser();
			const doc = parser.parseFromString(rtf, 'text/html');
			const paragraphTitle = doc.documentElement.querySelector('.expandable-text-title');
			const title = paragraphTitle ? paragraphTitle.textContent : '';
			const bodyElement = doc.documentElement.querySelector('body');

			// Generate id
			const bodyId = `body-${this.idGenerator.getId()}`;

			// Remove title from all bodyTexts except the first
			if (index !== 0 && paragraphTitle) {
				paragraphTitle.parentNode.removeChild(paragraphTitle);
			}

			// Hide first bodyText if class name found
			if (index === 0 && doc.documentElement.querySelector('.hidden-paragraph')) {
				return undefined;
			}

			return {
				title: title,
				id: bodyId,
				bodyText: bodyElement.innerHTML,
			} as ExpandableBodyTextData;
		});
		return bodyTextList;
	}

}