import CustomElement from "../../shared-files/Framework/custom-element.decorator";
import Constants from "../../shared-files/Framework/Constants/Constants";
import CustomHTMLBaseElement from "../../shared-files/CustomHTMLBaseElement";
import NotificationProfileFormCustomElement from "./Elements/NotificationProfileFormCustomElement";
import Globals from './Globals/Globals'
import MakeRequest from "../../shared-files/Framework/Utilities/MakeRequest";
import INotificationProfile from "./models/INotificationProfile";
import Colors from "../../shared-files/Framework/Constants/Colors"
import NotificationEventTableCustomElement from "./Elements/NotificationEventTableCustomElement";
import NotificationResultCustomElement from "./Elements/NotificationResultCustomElement";
import NotificationResult from "./models/NotificationResult";

@CustomElement({
	selector: 'notification-portal',
	template: `
<div class="wrapper">
	<div class="topconner">
		<label>Automatisk arkivering - aktiv</label>
		<label class="switch">
			<input id="status" type="checkbox"/>
			<div class="slider"></div>
		</label>
	</div>
	<div class="top">
		<div class="container container--left">
			<notification-profile-form>
			</notification-profile-form>
		</div>
		<div class="container container--right">
			<notification-result> </notification-result>
		</div>

		<div class="buttons-wrapper">
			<button id="save" class="button">save</button>
			<button id="try" class="button button--inverted">Test Connection</button>
		</div>
	</div>
	<div class="bottom">
		<notification-event-table> </notification-event-table>
		<button id="runallfail" class="button">Run All Fail</button>
	</div>
</div>
`,
	style: `
	/*font awsome CDN*/
	@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
	
	* {
		font-family: "Mulish", sans-serif;
		color: ${Colors.font};
	}

	/* text */
	h2,
	p,
	span {
		width: 100%;
	}

	/* label text */
	label {
		font-weight: 400;
		font-size: 14px;
		line-height: 11px;
		display: block;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom:6px;
		margin-right: 10px;
	}
	
	/* button */
	.button {
		background: ${Colors.primary};
		border: 2px solid ${Colors.primary};
		border-radius: 4px;
		color: ${Colors.senary};
		text-align: center;
		float: right;
		display: inline-block;
		font-size: 16px;
		margin: auto;
		cursor: pointer;
		width: 153px;
		height: 40px;
		margin: 10px 0 11px 10px;
	}
	.button--inverted {
		background: ${Colors.senary};
		color: ${Colors.primary};
	}
	
	/* inputs boxes */
	input {
		padding-left: 10px;
		padding-bottom:12px;
		padding-top:12px;
		line-height: 18px;
		width: 100%;
		height: 34px;
		border-radius: 4px;
		box-sizing: border-box;
		border: 1px solid ${Colors.tertiary};
		background: ${Colors.senary};
		margin-bottom: 15px;
	}
	input:read-only {
		line-height: 20px;
		height: 20px;
		margin-top: 10px;
	}
	/*wrapper*/
	.wrapper {
		width: 100%;
		margin-top: 30px;
	}
	.top {
		position: relative;
		float: left;
		width: 100%;
	}
	.bottom {
		clear: both;
		position: relative;
		float: left;
		width: 100%;
	}
	.bottom > button {
		float: right;
	}
	.container {
		width: calc(50% - 51px);
		position: relative;
		float: left;
	}
	.container--left {
		padding-right: 50px;
		border-right: 1px solid ${Colors.tertiary};
	}
	.container--right {
		padding-left: 50px;
	}
	.horizontal {
		display: inline-block;
		text-align:right;
	}

   /* switch button*/
   .switch {
		position: relative;
		display: inline-block;
		width: 60px;
		height: 24px;
	}
	.switch input {display:none;}
	.slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 34px;
		height: 24px;
		border: 2px solid ${Colors.quaternary};
	}
	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left:1px;
		top: 2px;
		background-color:${Colors.tertiary};
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
	}
	input:checked + .slider {
		border-color: ${Colors.success};
	}
	input:focus + .slider {
		box-shadow: 0 0 1px ${Colors.tertiary};
	}
	input:checked + .slider:before {
		-webkit-transform: translateX(26px);
		-ms-transform: translateX(26px);
	transform: translateX(32px);
		background-color: ${Colors.success};
	}
	.actions i {
		margin-left: 5px;
	}
	.slider:after
	{
		color: white;
		display: block;
		position: absolute;
		transform: translate(-50%,-50%);
		top: 50%;
		left: 50%;
		font-size: 10px;
		font-family: Verdana, sans-serif;
	}
	.topconner
	{
		float: right; 
		display: flex;	
	}
/*--------
	/*table*/
	table {
		border-collapse: collapse;
		width: 100%;
		border: 1px solid ${Colors.tertiary};
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}
	table td {
		border: none;
		font-size: 12px;
		line-height: 30px;
		padding-left: 20px;
	}
	.rotate-45 {
		transform: rotate(45deg);
	}
	table tr:nth-child(even) {
		background-color: ${Colors.quinary};
	}
	table tr:hover {
		background-color: ${Colors.secondary};
	}
	.buttons-wrapper {
		width: 100%;
		position: relative;
		float: left;
		clear: both;
	}
	.pad-10 {
		padding: 10px;
	}
`,
	useShadow: true,
})

export default class NotificationWebElement extends CustomHTMLBaseElement {
	private saveButton: HTMLButtonElement;
	private tryButton: HTMLButtonElement;
	private runAllFailButton: HTMLButtonElement;
	private notificationEventTableCustomElement: NotificationEventTableCustomElement;
	private notificationProfileFormCustomElement: NotificationProfileFormCustomElement;
	private notificationResultCustomElement: NotificationResultCustomElement;
	private notificationResult: NotificationResult;
	private statusElement: HTMLInputElement;

	constructor() {
		super();
	}

	componentDidMount() {
		this.addFontToDocumentHead();
		this.getAttributeNames().forEach(attributeName => {
			let attributeValue = this.getAttribute(attributeName);
			this.attributeChanged(attributeName, null, attributeValue);
		});
		this.saveButton = this.getChildElement('#save');
		this.tryButton = this.getChildElement('#try');
		this.runAllFailButton = this.getChildElement('#runallfail');
		this.notificationEventTableCustomElement = this.getChildElement('notification-event-table');
		this.notificationProfileFormCustomElement = this.getChildElement('notification-profile-form');
		this.notificationResultCustomElement = this.getChildElement('notification-result');
		this.statusElement = this.getChildElement('#status');
		this.notificationEventTableCustomElement.GetAllNotificationResults();
		this.addListeners();
		this.updateProductnotificationServiceStatus();
	}

	private updateProductnotificationServiceStatus() {
		const headerName = Constants.apiKeyHeaderName;
		const request = new MakeRequest(
			`${Globals.apiUrl}Profile/profilestatus`,
			'get',
			{
				[headerName]: Globals.apiKey,
				'Content-Type': 'application/json'
			})
			.send()
			.then(response => {
				var statusResult = (JSON.parse(response as string)) as boolean;
				this.statusElement.checked = statusResult;
			})
			.catch(exception => {
				console.log(exception);
			});
	}

	private addFontToDocumentHead() {

		const fontLink = document.createElement('link');
		fontLink.rel = 'stylesheet';
		fontLink.href = 'https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&display=swap';

		const fontAwsomeLink = document.createElement('link');
		fontAwsomeLink.rel = 'stylesheet';
		fontAwsomeLink.href = 'https://use.fontawesome.com/releases/v5.7.1/css/all.css';
		fontAwsomeLink.integrity = 'sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr';
		fontAwsomeLink.crossOrigin = 'anonymous';

		document.head.appendChild(fontLink);
		document.head.appendChild(fontAwsomeLink);
	}

	private addListeners() {
		this.saveButton.addEventListener("click", this.submitnotificationForm.bind(this));
		this.tryButton.addEventListener("click", this.trynotification.bind(this));
		this.runAllFailButton.addEventListener("click", this.runAllFail.bind(this));
		this.statusElement.addEventListener("click", this.statusChanged.bind(this));
		this.notificationEventTableCustomElement.addEventListener('show-result', (evt) => this.showResult(evt as CustomEvent));
		this.notificationEventTableCustomElement.addEventListener('update-single-row', (evt) => this.updatenotificationResultRow(evt as CustomEvent));
		this.notificationEventTableCustomElement.addEventListener('show-spinner', (evt) => this.showResultSpinner(evt as CustomEvent));
	}

	private statusChanged() {
		const headerName = Constants.apiKeyHeaderName;
		let status = this.statusElement.checked;
		const req = new MakeRequest(
			`${Globals.apiUrl}Profile/setprofilestatus?status=${status}`,
			'post', {
			[headerName]: Globals.apiKey,
			'Content-Type': 'application/json'
		}
		).send(JSON.stringify(status)).then(response => {
			var statusResult = (JSON.parse(response as string)) as boolean;
			this.statusElement.checked = statusResult;
		}).catch(exception => {
			console.log(exception);
		});
	}

	updatenotificationResultRow(evt: CustomEvent): void {
		var notificationResult = evt.detail as NotificationResult;
		this.notificationEventTableCustomElement.updateNotificationResultRowStatus(notificationResult);
	}

	showResultSpinner(evt: CustomEvent) {
		this.notificationResultCustomElement.addWaitingSpinner();
	}

	showResult(evt: CustomEvent): void {
		this.notificationResultCustomElement.clearContent();
		this.notificationResultCustomElement.AddNotificationResult(evt.detail);
	}

	private submitnotificationForm() {
		if (this.notificationProfileFormCustomElement.checkInputs()) {
			this.notificationResultCustomElement.addWaitingSpinner();
			var notificationProfile = this.notificationProfileFormCustomElement.getProfile();
			const headerName = Constants.apiKeyHeaderName;
			const req = new MakeRequest(
				`${Globals.apiUrl}Profile/upsert`,
				'post', {
				[headerName]: Globals.apiKey,
				'Content-Type': 'application/json'
			}
			).send(JSON.stringify(notificationProfile)).then(response => {
				var notificationProfile = (JSON.parse(response as string)) as INotificationProfile;
				this.notificationResultCustomElement.createNotificationProfile(this.notificationResult);
			}).catch(exception => {
				// to do: Add better exception handling
				console.log(exception);
			});
		}
	}

	private trynotification() {
		if (this.notificationProfileFormCustomElement.checkInputs()) {
			this.notificationResultCustomElement.addWaitingSpinner();
			var notificationProfile = this.notificationProfileFormCustomElement.getProfile();
			const headerName = Constants.apiKeyHeaderName;
			const req = new MakeRequest(
				`${Globals.apiUrl}notificationresult/test`,
				'post', {
				[headerName]: Globals.apiKey,
				'Content-Type': 'application/json'
			}
			).send(JSON.stringify(notificationProfile)).then(response => {
				this.notificationResult = new NotificationResult(JSON.parse(response as string));
				this.notificationResultCustomElement.AddNotificationResult(this.notificationResult);
			}).catch(exception => {
				console.log(exception)
			});
		}
	}

	private runAllFail() {
		const headerName = Constants.apiKeyHeaderName;
		this.notificationResultCustomElement.addWaitingSpinner();
		const req = new MakeRequest(
			`${Globals.apiUrl}notificationresult/runfailed`,
			'post', {
			[headerName]: Globals.apiKey,
			'Content-Type': 'application/json'
		}
		).send().then(response => {
			var results = (JSON.parse(response as string));
			/*var notificationResults = new Array();
			results.forEach(ele => {
				notificationResults.push(ele.result);
			});*/
			this.notificationEventTableCustomElement.updateNotificationResultRowsStatus(results);
			this.notificationResultCustomElement.AddNotificationResults(results);
		}).catch(exception => {
			console.log(exception)
		});
	}

	static get observedAttributes() {
		return ['api-key', 'api-url', 'customer-id'];
	}

	attributeChangedCallback(name: string, oldVal: string, newVal: string) {
		this.attributeChanged(name, oldVal, newVal);
	}

	private attributeChanged(name: string, oldVal: string, newVal: string) {
		switch (name) {
			case 'api-key':
				Globals.apiKey = newVal;
				break;
			case 'api-url':
				Globals.apiUrl = newVal;
				if (Globals.apiUrl[Globals.apiUrl.length - 1] !== '/') {
					Globals.apiUrl = `${Globals.apiUrl}/`;
				}
				break;
			case 'customer-id':
				Globals.customerId = newVal;
				break;
		}
	}


}