kwipped_approve = kwipped_approve || {};
kwipped_approve.button_definition = {};
//**********************************************************************
//* APPROVE button template definition
//* IMPORTANT - The actual button code will be dropped in place by blade.
//**********************************************************************ß
kwipped_approve.button_definition.template = document.createElement('template');
kwipped_approve.button_definition.template.innerHTML = /*html*/`
	<style>
		.reset{
			all: initial;
			/*
			* {
				all: unset;
			}
			*/
		}
		.loader {
			border: 2px solid #f3f3f3; /* Light grey */
			border-top: 2px solid #3498db; /* Blue */
			border-radius: 50%;
			width: 10px;
			height: 10px;
			animation: spin 1s linear infinite;
			margin:auto;
		}
		@keyframes  spin {
			0% { transform: rotate(0deg); }
			100% { transform: rotate(360deg); }
		}
		.hide{
			display:none;
		}
	</style>
	<div class="reset" id="main_content">
		<style style="display:none;">
			/* Safari 16.5 started displaying the syle tag when all:unset is present. */
			style {
				display:none !important;
			}
		</style>
		<style>
    .button{
			
		text-align:center;
		border-radius:10px;
		font-family: verdana,sans-serif;
		font-size:14px;	
		cursor:pointer;
		
    }
	.teaser {
		font-size:1.25em;
		font-weight:700;
	}
	.sm-txt {
		font-size:.80em;
	}

	.btn-container {
		/*
		display:flex;
		flex-direction: column;
		flex: 1 1 auto
		*/
		width:auto;
		display:inline-block;
	}


</style>
<div class="approve-btn-container btn-container">
	<div button class="button new_approve_finance_button">
		 <div class="new_finance_button" title="Finance">
            <span class="start_f_cart sm-txt">
                Business financing as low as
                <div class="loader hide" loader></div>
                <span teaser_wrapper class="price_f_cart">
                    <span class="teaser">$</span><span teaser class="teaser">464</span>/mo <span style="text-decoration:underline;">Apply</span>
                </span>
            </span>
    	</div>
    </div>
</div>


	</div>
`;

/**
 * Standard HTML costomElement registry. This will create our approve button, based on the template created
 * above this code.
 */
customElements.define('approve-button', class extends HTMLElement {
	//Instance variables
	items = [];
	core_loaded = false;
	teaser_waiting_on_core_loading = false;
	settings = {};
	current_properties = null;

	/**
	 * Called when the custom element is instantiated. It will build custom element content, attach it to a
	 * shadowRoot, attach proper listeners, stc.
	 */
	constructor() {
		super(); // always call super() first in the constructor.
		// Attach a shadow root to the element.
		kwipped_approve.button_definition.shadow_root = this.attachShadow({mode: 'open'});
		var clone = kwipped_approve.button_definition.template.content.cloneNode(true);
		kwipped_approve.button_definition.shadow_root.appendChild(clone);
		var self = this;

		//Button action. Must dispatch event and listen to event because of scoping.
		var button = this.shadowRoot.querySelector('[button]');
		if(button){
			button.addEventListener('click',function(){
				button.getRootNode().dispatchEvent(new Event('approve_button_clicked'));
				document.dispatchEvent(new CustomEvent('approve_button_clicked',{detail:{button_reference:this}}));
			});
		}
		this.shadowRoot.addEventListener('approve_button_clicked',function(){self.take_action()},false);

		//Learn more action. Must dispatch event and listen to event because of scoping.
		var learn_more = this.shadowRoot.querySelector('[learn-more]');
		if(learn_more){
			learn_more.addEventListener('click',function(){
				learn_more.getRootNode().dispatchEvent(new Event('approve_learn_more'));
			});
		}
		this.shadowRoot.addEventListener('approve_learn_more',function(){self.open_learn_more()},false);

		this.load_settings();
		if(!this.settings.skip_initial_loader) this.show_loader();

		var self = this;
		//When approve_core loads, it will emmit a message on the document announcing it is ready for use. f this
		//button loaded before the approve_core code was ready to go, it should check if it is in a waiting state
		//to retrieve a teaser.
		window.document.addEventListener('approve_core_loaded', function (e) {
			self.core_loaded = true;
			if(self.teaser_waiting_on_core_loading){
				self.get_teaser();
				self.teaser_waiting_on_core_loading = false;
			}
		}, false);
	}

	/**
	 * List of attributes we are observing.
	 */
	static get observedAttributes() {
		return ['price','model','qty','type','items'];
	}

	/**
	 * Listens fo attribute changes, and takes necessary action. See list of attributes we are observing.
	 * At an initial state, the button may have all properties set, but this function will still be called once per property. Fot this reason,
	 * I have conde to make sure we are not making unecessary calls. Namely, I use the current_properties variable to save the last property configuration,
	 * and see if any changes were made.
	 */
	attributeChangedCallback(name, oldValue, newValue){
		//If we have a list of items, it will override any other button entries.
		var items_sring = this.getAttribute('items');
		var items = null;
		if(items_sring){
			try{
				items = JSON.parse(items_sring);
			}
			catch{
				console.error("APPROVE Button:The items list provided does not follow the required specification. Could not parse items.")
				this.items = [];
				return;
			}
			if(!items){
				console.error("APPROVE Button:The items list provided does not follow the required specification. Items is empty.")
				this.items = [];
				return;
			}
			for(var i=0; i<items.length; i++){
				if(!this.check_requirements(items[i])){
					console.error("APPROVE Button:The items list provided does not follow the required specification.")
					this.items = [];
					return;
				}
			}
			this.items = items;
			this.get_teaser();
			return;
		}

		//If we have all needed information at hand, we will make that the items for this button.
		var price = this.getAttribute('price')
		var model = this.getAttribute('model');
		var qty = this.getAttribute('qty');
		var type = this.getAttribute('type');
		if(!price || !model || !qty || !type) return;

		var item = {
			model,
			price,
			qty,
			type
		};

		var pass = this.check_requirements(item);
		if(!pass){
			console.error("APPROVE Button:The provided attributes do not follow the required specification.")
			this.items = [];
		}
		else{
			var new_value = JSON.stringify(item);
			if(new_value == this.current_properties) return;
			this.current_properties = JSON.stringify(item);
			this.items = [item];
			this.get_teaser();
		}
	}

	/**
	 * Checks the requirements for the item passed as an argiment
	 * model - Not empty
	 * price - Not empty, number, not 0.
	 * qty - Not empty, number, not 0.
	 * type - Not empty (Not enforcing a perticular list of possible values)
	 */
	check_requirements(item){
		var pass = true;
		if(!item.model || ! item.type) pass = false;
		if(isNaN(item.price)) {
			item.price = item.price.replace(/\$/,'');
			item.price = item.price.replace(/,/,'');
		}
		//Is is a number
		if(isNaN(item.price)) pass=false;
		if(isNaN(item.qty)) pass=false;
		return pass;
	}

	/**
	 * Gets a teaser rate for this button. It utilizes the methods for retrieving data already included in approve_core.
	 * If approve_core is not yet loaded, this function will put the button is a "waiting" state. When approve_core is loaded, then
	 * it will use it to perform the pending teaser request.
	 */
	async get_teaser(){
		var self = this;
		//If the core is not here yet, we will wait.
		if(typeof window.kwipped_approve =="undefined" || typeof window.kwipped_approve.ajax =="undefined"){
			self.teaser_waiting_on_core_loading = true;
			return;
		}

		self.show_loader();
		if(!self.items.length) return;

		var approve_total = 0;
		for(var i=0;i<self.items.length; i++) approve_total+=self.items[i].price*self.items[i].qty;

		var response = await window.kwipped_approve.ajax.retrieve_teaser(approve_total);
		var els = self.shadowRoot.querySelector('[teaser]');
		var teaser = parseInt(response.teaser);
		var teaser_with_commas = teaser.toLocaleString("en-US");
		if(els) els.innerHTML=teaser_with_commas;
		self.hide_loader();
		//Now that is is all done, lets send product information to APPROVE.
		var send_data;
		for(var i=0;i<self.items.length; i++){
			send_data = {};
			send_data.model = self.items[i].model;
			send_data.price =self.items[i].price;
			window.kwipped_approve.core.send_product_information(send_data);
		}

		// window.kwipped_approve.ajax.retrieve_teaser(approve_total).then(function(response){
		// 	var els = self.shadowRoot.querySelector('[teaser]');
		// 	if(els) els.innerHTML=response.teaser;
		// 	self.hide_loader();
		// });
	}

	/**
	 * Shows loader if it exists in this button.
	 */
	show_loader(){
		var wrapper = this.shadowRoot.querySelector('[teaser_wrapper]');
		var loader = this.shadowRoot.querySelector('[loader]');
		if(wrapper) wrapper.classList.add('hide');
		if(loader) loader.classList.remove('hide');
	}

	/**
	 * Hides loader if it exists in this button.
	 */
	hide_loader(){
		var wrapper = this.shadowRoot.querySelector('[teaser_wrapper]');
		var loader = this.shadowRoot.querySelector('[loader]');
		if(wrapper) wrapper.classList.remove('hide');
		if(loader) loader.classList.add('hide');
	}

	/**
	 * Called when the user clicks on the button. This function is used by the listener added to the custom element
	 * in the constructor.
	 */
	take_action(){
		if(!this.items.length) return;
		var application_type = this.getAttribute('application-type');
		if(!application_type) return;
		var clear_cart_items = this.getAttribute('clear-cart-items');
		clear_cart_items = clear_cart_items =="true" ? true : false;
		if(application_type=="embedded_app"){
			if(typeof window.kwipped_approve == "undefined" || typeof window.kwipped_approve.embedded_app == "undefined"
				||  typeof window.kwipped_approve.embedded_app.app_reference == "undefined"){
				console.error("APPROVE Button:Cannot find a raference to the embedded application on the page.");
				return;
			}
			if(clear_cart_items) window.kwipped_approve.embedded_app.app_reference.clear_items();
			window.kwipped_approve.embedded_app.app_reference.add_equipment(this.items)
		}
		else if(application_type=="hosted_app"){
			var url= window.kwipped_approve.url+"/approve/finance?approveid="+window.kwipped_approve.approve_id+"&items="+JSON.stringify(this.items);
			window.open(url);
		}
	}

	/**
	 * Opens learn more page on plugin or site.
	 */
	open_learn_more(){
		var application_type = this.getAttribute('application-type');
		if(!application_type) return;
		if(application_type=="embedded_app"){
			if(typeof window.kwipped_approve == "undefined" || typeof window.kwipped_approve.embedded_app == "undefined"
				||  typeof window.kwipped_approve.embedded_app.app_reference == "undefined"){
				console.error("APPROVE Button:Cannot find a raference to the embedded application on the page.");
				return;
			}
			window.kwipped_approve.embedded_app.app_reference.open_about();
			window.kwipped_approve.embedded_app.app_reference.open_sidebar();
		}
		else if(application_type=="hosted_app"){
			//Per RB, This is an unlikely edge case. We will do nothing for the learn-more feature on a button set as hosted_app.
		}
	}

	/**
	 * Loads settings that may have been provided in the settings attribute. This will insert
	 * flexibility to change button behavior with low impact to documentation/client code.
	 */
	load_settings(){
		var settings_string = this.getAttribute('settings');
		var settings = null;
		try{
			settings = JSON.parse(settings_string);
		}
		catch{
			//No settings.
			return;
		}
		if(settings) this.settings = settings;
	}

});