function enableSelector(e){
    const value = document.querySelector("#ta-value");
    const input = document.querySelector("#ta-amount");
    const instSelectors = document.querySelector("#response-inst-card");
    const instNameSelector = document.querySelector("#inst-name-selector");

    
    value.textContent = input.value;
    input.addEventListener("input", (event) =>{
	value.textContent = event.target.value;
    });

    
    const name = document.querySelector("#inst-name-selector");
    console.log(e.target.name);
    name.value = e.target.name;
    instSelectors.hidden=false;
}

document.addEventListener('alpine:init', ()=>{
    Alpine.data('app', ()=>({
	open: false,
	instSelected: '',
	instSelectedImage: '',
	tf: '',
	ta: '',
	compvalue: 1,
	compoperation: 'compra',
	buttoninst: {},
	theme: 'dark',
	get urler() { return '/api/instituciones/history';},
	// print representation of search history on form
	get queryRepr() {
	    if (this.instSelected === ""|| this.tf === ""){
		console.log(this.instSelected, this.tf);
		return "Seleciona institucion y periodo de tiempo";
	    }
	    const tc =  document.querySelector("#response-inst-table-container");
	   	    let tfstr = '';
	    switch (this.tf){
	    case 'week':
		tfstr = 'semanas';
		break;
	    case 'day':
		tfstr = 'dias';
		break;
	    case 'hour':
		tfstr = 'horas';
		break;
	    case 'month':
		tfstr = 'meses';
		break;
	    }
	    return `Busqueda: desde hace ${this.ta} ${tfstr} en ${this.instSelected}`;
	    
	},
	// return table to empty content con history
	resetTableC(){
	    const tc =  document.querySelector("#response-inst-table-container");
	    tc.innerHTML = "";
	},
	
	// change div visibility on comparer
	toglediv(e){
	    // lets change button content
	    let clase = "id-" + e.target.name;
	    const container = document.querySelector(`#${clase}`);
	    console.log(clase);
	    
	    if (container.classList.contains("hidden")) {
		container.classList.remove('hidden');
	    }else {
		container.classList.add('hidden');
	    }
	},
	
	// calculate value on a table depending on options provided
	calcvalue(e){
	    const quantity = e.target.value;
	    const operation = document.getElementById("comparar-operacion");
	    const containers = document.getElementsByClassName("comparer-row");
	    if ( containers.length === 0){
		return;
	    }
	    for (let cont of containers){
		const compra = document.getElementById(cont.id+"-compra");
		const venta = document.getElementById(cont.id+"-venta");
		const result = document.getElementById(cont.id+"-res");
		const currency = document.getElementById(cont.id+"-cur");
		if (isNaN(this.compvalue)|| this.compvalue == 0){
		    console.log("is not a number", this.compvalue);
		    return;
		}
		switch (this.compoperation){
		case "compra":
		    result.innerHTML = Number((this.compvalue / venta.innerHTML).toFixed(2)).toLocaleString();
		    currency.innerHTML = "$ US";
		    break;
		case "venta":
		    result.innerHTML = Number((compra.innerHTML * this.compvalue).toFixed(2)).toLocaleString();
		    currency.innerHTML = "$ RD";
		    break;
		}
		// comparemos si compra y venta son numeros
	    }    
	},
	get reprCompOperation(){
	    switch (this.compoperation){
	    case "compra":
		return `Comprando dolares con ${Number(this.compvalue).toFixed(2).toLocaleString()} $RD pesos.`;
		break;
	    case "venta":
		return `Vendiendo ${Number(this.compvalue).toFixed(2).toLocaleString()} dolares con cambios a $RD pesos.`; 
		break;
	    };
	},
	
	themeChange(e){
	    
	    let r = document.documentElement.style;
	    
	    switch (e.target.checked){
	    case false:
		r.setProperty('--root-bg-color', 'black');
		r.setProperty("--root-bg-color-secondary", "hsla(250, 50%, 20%, 0.2);");
		r.setProperty("--root-border-color", "white");
		r.setProperty("--root-color", "white");
		r.setProperty("--root-bg-color-btn", "rgba(50, 50, 50, 0.5)");
		r.setProperty("--root-bg-color-btn-hoover", "rgb(50 50 50)");
		r.setProperty("--root-bg-color-btn-focus", "rgb(50 50 50)");
		r.setProperty("--root-bg-color-img", "white");
		r.setProperty("--root-shadow-color-btn-opened", "rgba(0, 250, 0, 0.5)");
		r.setProperty("--root-shadow-color-btn-cloded", "rgba(250, 0, 0, 0.5)");
		r.setProperty("--root-shadow-color-img", "rgb(50 100 50)");
		console.log(this.theme);
		break;
	    case true:
		r.setProperty('--root-bg-color', 'white');
		r.setProperty("--root-bg-color-secondary", "hsla(250, 50%, 85%, 0.2)");
		r.setProperty("--root-color", "black");
		r.setProperty("--root-border-color", "black");
		r.setProperty("--root-bg-color-btn", "rgba(80, 80, 80, 0.2)");
		r.setProperty("--root-bg-color-btn-hoover", "rgb(50 50 50)");
		r.setProperty("--root-bg-color-btn-focus", "rgb(50 50 50)");
		r.setProperty("--root-bg-color-img", "white");
		r.setProperty("--root-shadow-color-btn-opened", "rgba(0, 250, 0, 0.5)");
		r.setProperty("--root-shadow-color-btn-cloded", "rgba(250, 0, 0, 0.5)");
		r.setProperty("--root-shadow-color-img", "rgb(50 100 50)");
		console.log(this.theme);
		break;
	    }
	},
    }));
});

document.body.addEventListener("htmx:afterSwap",(e)=>{
    const page = document.querySelector("#page");
  
    htmx.process(e.target);

    
});