import CustomElement from "../../../shared-files/Framework/custom-element.decorator";
import NotificationResult from "../models/NotificationResult";
import CustomHTMLBaseElement from "../../../shared-files/CustomHTMLBaseElement";
import Constants from "../../../shared-files/Framework/Constants/Constants";
import MakeRequest from "../../../shared-files/Framework/Utilities/MakeRequest";
import Globals from '../Globals/Globals';
import NotificationResultCustomElement from './NotificationResultCustomElement';
import SVGs from '../../../shared-files/Framework/Constants/SVGs';

@CustomElement({
	selector: 'notification-event-table',
	template: `
		<label>Leveringer</label>
		<table>
		</table>`,
	style: `
	.pad-10 {
		padding: 10px;
	}
	.result-cell
	{
		padding-left: 23px;
		color: #000;
	}
	.action-run-button
	{
		background-color: Transparent;
		background-repeat:no-repeat;
		border: none;
		cursor:pointer;
		overflow: hidden;
		outline:none;
	}
	.color-fail
	{
		color: #CE2828;
	}
	.color-success
	{
		color: #28BECE;
	}
	.fa-play{
		color: #003E64;
	}
	`,
	useShadow: false,
})


export default class NotificationEventTableCustomElement extends CustomHTMLBaseElement {
	private notificationTable: HTMLTableElement;
	private nativeInput: HTMLInputElement;
	public notificationResultCustom: NotificationResultCustomElement;

	constructor() {
		super();
	}

	get value() {
		if (!this.nativeInput) {
			return null;
		}
		return this.nativeInput.value;
	}

	set value(val: string) {
		if (!this.nativeInput) {
			return;
		}
		this.nativeInput.value = val;
	}

	componentDidMount() {
		this.nativeInput = this.getChildElement('.custom-input');
		this.notificationTable = this.getChildElement('table') as HTMLTableElement;
	}

	//load all notificationResults into table.
	GetAllNotificationResults() {
		const headerName = Constants.apiKeyHeaderName;
		//`https://localhost:5001/notificationresult/getall?customerId=6657`
		//`ceeab147-adea-4352-9282-0f75b4254942`
		const request = new MakeRequest(
			`${Globals.apiUrl}notificationresult/getall?customerId=${Globals.customerId}`,
			'get',
			{
				[headerName]: Globals.apiKey,
				'Content-Type': 'application/json'
			})
			.send()
			.then(response => {
				var notificationResults = (JSON.parse(response as string)) as NotificationResult[];
				this.notificationTable.appendChild(this.addnotificationresultsHeaderRow());
				notificationResults.forEach(notificationResult => this.notificationTable.appendChild(this.addnotificationResultRow(notificationResult)));
			})
			.catch(exception => {
				console.log(exception);
			});
	}

	private addnotificationresultsHeaderRow(){
		var tableRow = this.notificationTable.insertRow(0);

		tableRow.insertCell(0);

		var orderIdHeader = tableRow.insertCell(1)
		orderIdHeader.innerHTML = "Ordre-id";
		tableRow.appendChild(orderIdHeader);

		var resultHeader = tableRow.insertCell(2);
		resultHeader.innerHTML = 'Resultat';
		tableRow.appendChild(resultHeader);

		var actionHeader = tableRow.insertCell(3);
		actionHeader.innerHTML = 'Lever igen';
		tableRow.appendChild(actionHeader);

		return tableRow;
	}

	// create dynamic notificationResult row 
	private addnotificationResultRow(notificationResult: NotificationResult) {

		var tableRow = this.notificationTable.insertRow(0);
		// icon cell
		var iconCell = tableRow.insertCell(0);
		var faIcon = notificationResult.resultStatus == "Success" ? SVGs.link : SVGs.linkOff;
		var faColor = notificationResult.resultStatus == "Success" ? 'success' : 'fail';
		iconCell.innerHTML = faIcon;
		iconCell.classList.add("result-cell");
		iconCell.classList.add("result-cell--status-icon");
		tableRow.appendChild(iconCell);

		var orderIdCell = tableRow.insertCell(1);
		orderIdCell.innerText = notificationResult.signOrderId;
		orderIdCell.classList.add("result-cell");
		if (faColor != 'success') {
			orderIdCell.classList.add(`color-${faColor}`);
		}
		tableRow.appendChild(orderIdCell);

		var resultCell = tableRow.insertCell(2);
		resultCell.innerText = notificationResult.resultStatus;
		resultCell.classList.add("result-cell");
		if (faColor != 'success') {
			resultCell.classList.add(`color-${faColor}`);
		}
		tableRow.appendChild(resultCell);

		var actionCell = tableRow.insertCell(3);
		var actionButton = document.createElement('button');
		actionButton.innerHTML = SVGs.playArrow;
		actionButton.addEventListener('click', () => {
			this.runAction(notificationResult.id);
		});
		actionButton.classList.add("result-cell");
		actionButton.classList.add("action-run-button");
		actionCell.appendChild(actionButton);
		tableRow.appendChild(actionCell);

		return tableRow;
	}

	// bind runAction on play button
	private runAction(notificationResultId: string): void {
		let showSpinner = new CustomEvent('show-spinner', {
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(showSpinner);
		const headerName = Constants.apiKeyHeaderName;
		const request = new MakeRequest(
			`${Globals.apiUrl}notificationresult/runasync?resultId=${notificationResultId}`,
			'post',
			{
				[headerName]: Globals.apiKey,
				'Content-Type': 'application/json'
			}
		)
			.send()
			.then(response => {
				var notificationResult = new NotificationResult(JSON.parse(response as string));
				let showDataEvent = new CustomEvent('show-result', {
					bubbles: true,
					composed: true,
					detail: notificationResult
				});
				let updateSingleRowEvent = new CustomEvent('update-single-row', {
					bubbles: true,
					composed: true,
					detail: notificationResult
				});
				this.dispatchEvent(showDataEvent);
				this.dispatchEvent(updateSingleRowEvent);
			})
			.catch(exception => {
				console.log(exception);
			});
	}

	updateNotificationResultRowStatus(notificationResult: NotificationResult) {
		// if we want load all records from DB following code can use
		//this.notificationTable.innerHTML = "";
		//this.GetAllnotificationResults();
		// otherwise update only spceific row as follows.
		let statuscolumn = 2;
		let resultCell = null;
		var faIcon = notificationResult.resultStatus == "Success" ? SVGs.link : SVGs.linkOff;
		var faColor = notificationResult.resultStatus == "Success" ? 'success' : 'fail';
		for (var i = 0, row; row = this.notificationTable.rows[i]; i++) {
			// retrive result id row cell
			resultCell = (row as HTMLTableRowElement).cells[1] as HTMLTableDataCellElement;
			if (resultCell.innerText === notificationResult.id) {

				(row as HTMLTableRowElement).cells[0].innerHTML = faIcon;

				(row as HTMLTableRowElement).cells[statuscolumn].innerText = notificationResult.resultStatus;

				var cssClasses = resultCell.classList as string[];
				for (var j = cssClasses.length - 1; j >= 0; j--) {
					var className = resultCell.classList[j];
					resultCell.classList.remove(className);
				}
				if (faColor != 'success') {
					resultCell.classList.add(`color-${faColor}`);
				}
				resultCell.classList.add(`result-cell`);
			}
		}
	}

	updateNotificationResultRowsStatus(notificationResults: NotificationResult[]) {
		notificationResults.forEach((item) => {
			this.updateNotificationResultRowStatus(item);
		});
	}
}