import CustomElement from "../../../shared-files/Framework/custom-element.decorator";
import { AuthenticationType } from "../models/AuthenticationType";
import INotificationProfile from "../models/INotificationProfile";
import CustomHTMLBaseElement from "../../../shared-files/CustomHTMLBaseElement";
import Colors from "../../../shared-files/Framework/Constants/Colors";
import MakeRequest from "../../../shared-files/Framework/Utilities/MakeRequest";
import Globals from "../Globals/Globals";
import Constants from "../../../shared-files/Framework/Constants/Constants";

@CustomElement({
	selector: "notification-profile-form",
	template: `
		<form class="form" id="form">
			<!-- move this to a independent web component -->
			<label id="lbl-url">http url</label>
			<input id="url" placeholder="Url" autocomplete="off"">
			<div id="row" class="row">
				<div id="column" class="column column-50" >
                    <label id="lbl-type">Authentication Type</label>
					<select id="type" class="select-element">
						<option value="${AuthenticationType.None}">None</option>
                        <option value="${AuthenticationType.Basic}">Basic</option>
						<option value="${AuthenticationType.Bearer}">Bearer</option>
					</select>
				</div>
				<div id="auth" class="column column-50">
                </div>
			</div>
			<div>
				<label id="lbl-filetemplate">contact name</label>
				<input id="contact-name" placeholder="contact name" autocomplete="off">
			</div>
			

			<label id="lbl-filetemplate">contact e-mail</label>
			<input id="contact-email" placeholder="contact e-mail" autocomplete="off">
		</form>
	`,
	style: `
	* {
		color: ${Colors.font};
	}
	.pad-10 {
		padding: 10px;
	}
	.color-primary
	{
		color: ${Colors.primary};
	}
	.color-error
	{
		color: ${Colors.error};
	}
	.color-success
	{
		color: ${Colors.success};
	}
	.label {
		font-size: 14px;
	}
	.divplaceholder-wrapper{
		margin-top:13px;
	}
	.divplaceholder-wrapper-select {
		width: calc(100% - 79px);
		height: 34px;
		border-radius: 4px 0 0 4px;
		box-sizing: border-box;
		border: 1px solid ${Colors.tertiary};
		background: ${Colors.senary};
		margin-bottom: 15px;
		display:inline-block;
	}
	.divplaceholder-wrapper-button {
		display:inline-block;
		height: 34px;
		margin: 0px;
		width: 79px;
		border-radius: 0 4px 4px 0;
	}
	.select-element {
		width: 100%;
		height: 34px;
		border-radius: 4px;
		box-sizing: border-box;
		border: 1px solid ${Colors.tertiary};
		background: ${Colors.senary};
		margin-bottom: 15px;
	}
	/* Create two equal columns that floats next to each other */
	.column {
		float: left;
		width: 50%;
		box-sizing: border-box;
	}
	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}
	.column-50 {
		width: 50%;
	}
	.column:not(:first-of-type) {
		padding-left: 10px
	}
	`,
	useShadow: false,
})
export default class NotificationProfileFormCustomElement extends CustomHTMLBaseElement {
	private httpUrlInput: HTMLInputElement;
	private typeElement: HTMLSelectElement;
	private contactEmail: HTMLInputElement;
	private contactName: HTMLInputElement;
	private passwordInput: HTMLInputElement;
	private usernameInput: HTMLInputElement;
	private authenticationUrlInput: HTMLInputElement;
	private apiSecretInput: HTMLInputElement;
	private apiKeyInput: HTMLInputElement;
	private row: HTMLDivElement;

	// placeholder fields
	private placeholderSelect: HTMLSelectElement;
	private errorColor: string = Colors.error;
	private successColor: string = Colors.success;
	private nativeInput: HTMLInputElement;
	httpPortRexExp: RegExp = /^[0-9\s]*$/;
	contactEmailExp: RegExp =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

	private change = new Event("change");

	constructor() {
		super();
	}

	componentDidMount() {
		this.httpUrlInput = this.getChildElement("#url") as HTMLInputElement;
		this.typeElement = this.getChildElement("#type") as HTMLSelectElement;
		this.contactEmail = this.getChildElement("#contact-email") as HTMLInputElement;
		this.contactName = this.getChildElement("#contact-name") as HTMLInputElement;

		this.row = this.getChildElement("#column") as HTMLDivElement;

		this.fillWithCurrentCustomerData();
		this.addListeners();
	}

	private addListeners() {
		this.httpUrlInput.addEventListener("blur", this.validatehttpInput.bind(this, this.httpUrlInput));
		this.contactEmail.addEventListener("blur", this.validateEmailField.bind(this));
		this.typeElement.addEventListener("change", this.toggleConnectionModeField.bind(this));
	}

	validateEmptyField(event: Event): void {
		event.preventDefault();
		const inputField = event.currentTarget as HTMLInputElement;
		this.VallidateEmptyInput(inputField);
	}

	validateEmailField(event: Event): void {
		event.preventDefault();
		this.validateEmailInput();
	}

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

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

	fillWithCurrentCustomerData() {
		const apiKeyHeaderName = Constants.apiKeyHeaderName;
		new MakeRequest(`${Globals.apiUrl}profile/get`, "get", {
			[apiKeyHeaderName]: Globals.apiKey,
			"Content-Type": "application/json",
		})
			.send()
			.then((response) => {
				var notificationProfile = JSON.parse(response as string) as INotificationProfile;
				this.setProfile(notificationProfile);
			})
			.catch((exception) => {
				console.log(exception);
			});
	}

	getProfile(): INotificationProfile {
		var profile = {
			url: this.httpUrlInput.value.trim(),
			authenticationType: this.getSelectedAuthenticationType(),
			authenticationUrl: this.authenticationUrlInput?.value.trim(),
			username: this.usernameInput?.value.trim(),
			password: this.passwordInput?.value.trim(),
			apiKey: this.apiKeyInput?.value.trim(),
			apiSecret: this.apiSecretInput?.value.trim(),
			contactPerson: this.contactEmail.value.trim(),
			contactName: this.contactName.value.trim(),
		} as INotificationProfile;

		return profile;
	}

	setProfile(notificationProfile: INotificationProfile): void {
		this.httpUrlInput.value = notificationProfile.url;
		this.contactEmail.value = notificationProfile.contactPerson;
		this.contactName.value = notificationProfile.contactName;
		this.setSelectedAuthenticationType(notificationProfile.authenticationType);
		if(notificationProfile.authenticationType.toString() == "Bearer"){
			this.authenticationUrlInput.value = notificationProfile.authenticationUrl;
			this.apiSecretInput.value = notificationProfile.apiSecret;
			this.apiKeyInput.value = notificationProfile.apiKey;
		}
		if(notificationProfile.authenticationType.toString() == "Basic"){
			this.usernameInput.value = notificationProfile.username;
			this.passwordInput.value = notificationProfile.password;
		}
	}

	isValidhttpUrl(string) {
		try {
			var url = new URL(string);
			switch (url.protocol) {
				case "https:":
				case "http:":
					return true;
				default:
					return false;
			}
		} catch {
			return false;
		}
	}
	
	validatehttpInput(httpUrlInput: HTMLInputElement): Boolean {
		const url = httpUrlInput.value.trim();
		if (this.isValidhttpUrl(url)) {
			httpUrlInput.style.borderColor = this.successColor;
			return true;
		} else {
			httpUrlInput.style.borderColor = this.errorColor;
			return false;
		}
	}

	validateEmailInput(): Boolean {
		const value = this.contactEmail.value.trim();
		if (this.contactEmailExp.test(value)) {
			this.contactEmail.style.borderColor = this.successColor;
			return true;
		} else {
			this.contactEmail.style.borderColor = this.errorColor;
			return false;
		}
	}

	VallidateEmptyInput(inputField: HTMLInputElement): Boolean {
		if(inputField != null){
			if (inputField.value.trim() == "") {
				inputField.style.borderColor = this.errorColor;
				return false;
			} else {
				inputField.style.borderColor = this.successColor;
				return true;
			}
		}
		return true;
	}

	public checkInputs(): Boolean {
		let hasValidData = true;

		if (!this.validatehttpInput(this.httpUrlInput)) {
			hasValidData = false;
		}

		// validate contact Name
		if (!this.validateEmailInput()) {
			hasValidData = false;
		}

		// validate username
		if (!this.VallidateEmptyInput(this.usernameInput)) {
			hasValidData = false;
		}

		// validate password
		if (!this.VallidateEmptyInput(this.passwordInput)) {
			hasValidData = false;
		}

		return hasValidData;
	}

	private setErrorfor(input: HTMLElement) {
		input.className = "form-control error";
	}

	private setSucessFor(input: HTMLElement) {
		input.className = "form-control success";
	}
	/*
	getTestProfile(): InotificationProfile {
		var profile =
			{
				url: "http://waws-prod-am2-331.http.azurewebsites.windows.net/",
				port: 21,
				connectionMode: "Explicit",
				protocol: httpType.http,
				fileTemplate: "{Document.FileName}",
				folderTemplate: "{SenderName}/{Signer.Name}",
				userName: "esignatur-http-test\\$esignatur-http-test",
				Password: "3bhBzGj8mkQEYpnbFNpHKNpaQnWA8nEGa6AcWnrCc0iYSvJTqayMtkuqkXuP"

			} as InotificationProfile;
		return profile;
	}*/

	private getSelectedAuthenticationTypeEnum(): number {
		var selectedValue = this.typeElement.options[this.typeElement.selectedIndex].value;
		return +selectedValue;
	}

	private getSelectedAuthenticationType(): AuthenticationType {
		var selectedValue = this.getSelectedAuthenticationTypeEnum();
		return (<any>AuthenticationType)[selectedValue];
	}

	private setSelectedAuthenticationType(authenticationType: AuthenticationType) {
		const options = Array.prototype.slice.call(this.typeElement.options);
		const optionIndex = options.findIndex((option) => option.innerHTML === authenticationType.toString());
		this.typeElement.selectedIndex = optionIndex;
		const changeEvent: Event = new Event("change");
		this.typeElement.dispatchEvent(changeEvent);
	}

	private toggleConnectionModeField() {
		const val: AuthenticationType = this.getSelectedAuthenticationTypeEnum();
		if (val === AuthenticationType.None) {
            let x = this.getChildElement("div")
			x.getElementsByTagName("div")[1].remove()

			this.usernameInput = null;
			this.passwordInput = null;
			this.authenticationUrlInput = null;
			this.apiSecretInput = null;
			this.apiKeyInput = null;
			
		}
        else if(val === AuthenticationType.Basic){
            let x = this.getChildElement("div")
            if(x.getElementsByTagName("div").length == 2)
			    x.getElementsByTagName("div")[1].remove()

            let newDiv = document.createElement("div");
            newDiv.setAttribute("id", "username-password-div")

            let lblUsername = document.createElement("label");
            lblUsername.id = "lbl-username";
            lblUsername.textContent = "username";

            let inputUsername = document.createElement("input");
            inputUsername.id = "username";
            inputUsername.placeholder = "username";
            inputUsername.setAttribute("autocomplete", "off");

            let lblPassword = document.createElement("label");
            lblPassword.id = "lbl-password";
            lblPassword.textContent = "password";

            let inputPassword = document.createElement("input");
            inputPassword.id = "password";
            inputPassword.type = "password";
            inputPassword.placeholder = "password";
            inputPassword.setAttribute("autocomplete", "off");

            let lblAuthUrl = document.createElement("label");
            lblAuthUrl.id = "lbl-auth-url";
            lblAuthUrl.textContent = "auth-url";

            let inputAuthUrl = document.createElement("input");
            inputAuthUrl.id = "auth-url";
            inputAuthUrl.type = "auth-url";
            inputAuthUrl.placeholder = "auth-url";
            inputAuthUrl.setAttribute("autocomplete", "off");

            newDiv.appendChild(lblUsername);
            newDiv.appendChild(inputUsername);
            newDiv.appendChild(lblPassword);
            newDiv.appendChild(inputPassword);
            newDiv.appendChild(lblAuthUrl);
            newDiv.appendChild(inputAuthUrl);

            this.row.appendChild(newDiv)

			this.usernameInput = this.getChildElement("#username") as HTMLInputElement;
			this.passwordInput = this.getChildElement("#password") as HTMLInputElement;
			this.authenticationUrlInput = this.getChildElement("#auth-url") as HTMLInputElement;

			this.usernameInput.addEventListener("blur", this.validateEmptyField.bind(this));
			this.passwordInput.addEventListener("blur", this.validateEmptyField.bind(this));

			this.apiSecretInput = null;
			this.apiKeyInput = null;
        }
        else {
            let x = this.getChildElement("div")
            if(x.getElementsByTagName("div").length == 2)
			    x.getElementsByTagName("div")[1].remove()

            let newDiv = document.createElement("div");
            newDiv.setAttribute("id", "username-password-div")
            
            let lblApiSecret = document.createElement("label");
            lblApiSecret.id = "lbl-api-secret";
            lblApiSecret.textContent = "Api Secret";

            let inputApiSecret = document.createElement("input");
            inputApiSecret.id = "api-secret";
            inputApiSecret.placeholder = "Api Secret";
            inputApiSecret.setAttribute("autocomplete", "off");

            let lblapiKey = document.createElement("label");
            lblapiKey.id = "lbl-access-secret";
            lblapiKey.textContent = "Api Key";

            let inputapiKey = document.createElement("input");
            inputapiKey.id = "apiKey";
            inputapiKey.placeholder = "Api Key";
            inputapiKey.setAttribute("autocomplete", "off");

            let lblAuthUrl = document.createElement("label");
            lblAuthUrl.id = "lbl-auth-url";
            lblAuthUrl.textContent = "authentication url";

            let inputAuthUrl = document.createElement("input");
            inputAuthUrl.id = "auth-url";
            inputAuthUrl.type = "auth-url";
            inputAuthUrl.placeholder = "authentication url";
            inputAuthUrl.setAttribute("autocomplete", "off");

            newDiv.appendChild(lblApiSecret);
            newDiv.appendChild(inputApiSecret);
            newDiv.appendChild(lblapiKey);
            newDiv.appendChild(inputapiKey);
            newDiv.appendChild(lblAuthUrl);
            newDiv.appendChild(inputAuthUrl);

            this.row.appendChild(newDiv)

			this.apiSecretInput = this.getChildElement("#api-secret") as HTMLInputElement;
			this.apiKeyInput = this.getChildElement("#apiKey") as HTMLInputElement;
			this.authenticationUrlInput = this.getChildElement("#auth-url") as HTMLInputElement;

			this.usernameInput = null;
			this.passwordInput = null;
			
			this.apiSecretInput.addEventListener("blur", this.validateEmptyField.bind(this));
			this.apiKeyInput.addEventListener("blur", this.validateEmptyField.bind(this));
			this.authenticationUrlInput.addEventListener("blur", this.validatehttpInput.bind(this, this.authenticationUrlInput));
		}
	}

	resetFields() {
		this.httpUrlInput.value = "";
		this.typeElement.selectedIndex = 0;
		this.placeholderSelect.selectedIndex = 0;
		this.contactEmail.value = "";
		this.usernameInput.value = "";
		this.passwordInput.value = "";
	}
}