window.Hyperflux = class {
    constructor(path){
        this.path = path || '';

        if(this.path.split('').pop() === '/'){
            this.path = this.path.slice(0,-1);
        }
    }

    callComponentAction(action, opts, cb){

        if(opts && opts.body){
            opts.values = opts.body;
            delete opts.body;
        }
        
        htmx.ajax('POST', this.path+'/@hx/'+action,  opts).then(cb || (() => {
            // this code will be executed after the 'htmx:afterOnLoad' event,
            // and before the 'htmx:xhr:loadend' event
        }));
    }
}

window.flux_nav = function(evt){
	if(evt.metaKey || evt.shiftKey || evt.ctrlKey) {
		evt.stopImmediatePropagation();
		window.open(evt.target.getAttribute('href'), "_blank");
	}

	if(evt.target.getAttribute('flux:link:active')){

		if(evt.target.getAttribute('flux:link:group')){
			let els = document.querySelectorAll("[flux\\:link\\:group='"+evt.target.getAttribute('flux:link:group')+"']");
			
			[...els].forEach(el => {
				el.classList.remove(evt.target.getAttribute('flux:link:active'));
			});
		}

		evt.target.classList.add(evt.target.getAttribute('flux:link:active'));					
	}
}

window.flux_xhrprogress = function(e, target){
    document.querySelector(target).value = (e.detail.loaded / e.detail.total) * 100;
}

window.HyperfluxComponent = class extends HTMLElement {
	connectedCallback() {
		this.render();
	}

	render() {

		let prefix = '';
		let vals = '';
		let name = this.attributes.name.nodeValue;
		
		if(this.attributes.params){
			vals = " hx-vals='"+this.attributes.params.nodeValue+"'";
		}

		if(window.hyperfluxUri){
			prefix = window.hyperfluxUri;
		}

		if(document.documentElement.dataset && document.documentElement.dataset.hyperfluxUri){
			prefix = document.documentElement.dataset.hyperfluxUri;
		}

		this.outerHTML = '<div hx-post="'+prefix+'/@hx/'+name+':mount" hx-trigger="load" hx-swap="outerHTML"'+vals+'></div>';
	}
}

window.customElements.define('hyperflux-component', HyperfluxComponent);

document.addEventListener('DOMContentLoaded', () => {

	document.body.addEventListener('htmx:sseError', function(evt) {
	    console.log('htmx:sseError', evt);
	});
	
	document.body.addEventListener('htmx:sseOpen', function(evt) {
	    console.log('htmx:sseOpen', evt);
	});
	
	document.body.addEventListener('htmx:sseClose', function(evt) {
	    console.log('htmx:sseClose', evt);
	});
	
	document.body.addEventListener('htmx:configRequest', function(evt) {
	
	    const attributes = evt.detail.elt.attributes;
		
		// csrf-token
        if(document.querySelector('meta[name="csrf-token"]')){
        	evt.detail.headers['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    	}
		
		// flux:body  | Include attributes on the body
	    for (var key in attributes) {
	        if (typeof attributes[key] != 'function'){
	            if(attributes[key].name){
	
	                let exp = attributes[key].name.split(':');
		
	                // flux:body:*
	                if(exp.length === 3 && exp[0] === 'flux' && exp[1] === 'body'){
	                    evt.detail.parameters[exp[2]] = evt.detail.elt.getAttribute(attributes[key].name);
	                }
	
	                // flux:body
	                if(exp.length === 2 && exp[0] === 'flux' && exp[1] === 'body'){
	                    const j = JSON.parse(evt.detail.elt.getAttribute(attributes[key].name));
	                    //console.log('J', j);
	                    Object.keys(j).forEach(prop => {
	                        if(!evt.detail.parameters[prop]){
	                            evt.detail.parameters[prop] = JSON.stringify(j[prop]);
	                        }
	                    });
	                }
	            }
	        }    
	    }
	    
	    // flux:multipart
	    if(evt.detail.elt.getAttribute('hx-encoding') === 'multipart/form-data'){
            let files = {}
            let fileInputs = evt.detail.elt.querySelectorAll("input[type='file']");

            let fs = [...fileInputs];

            fs.forEach(f => {
                console.log('F', f.getAttribute('name'), f.files);
                let fileArr = [...f.files];

                // multiple
                if(f.getAttribute('name').indexOf('[]') !== -1){
                    if(!files[f.getAttribute('name')+':meta']){
                        files[f.getAttribute('name')+':meta'] = [];
                    }

                    console.log('params', files);

                    fileArr.forEach(file => {
                        files[f.getAttribute('name')+':meta'].push({
                            name : file.name,
                            size : file.size,
                            type : file.type,
                        })
                    });

                // single
                } else {
                    if(fileArr[0]){
                        files[f.getAttribute('name')+':meta'] = {
                            name : fileArr[0].name,
                            size : fileArr[0].size,
                            type : fileArr[0].type,
                        };
                    }
                }
                
            });

            Object.keys(files).forEach(k => {
                evt.detail.parameters[k] = JSON.stringify(files[k]);
            });
        }
	});
	
	document.body.addEventListener('htmx:afterRequest', function(evt) {
		
		// session expired
        if(evt.detail.xhr.status === 419){
            alert(evt.detail.xhr.responseText);
            window.location.reload();
        }
    });
	
	// hyperflux:hotswap
	document.addEventListener("hyperflux:hotswap", function(evt){
        console.log('hyperflux:hotswap', evt.detail.items);

        evt.detail.items.forEach(item => {
            if(document.querySelector(item.target)){
                console.log(item.target);
                //htmx.ajax('GET', item.contentUrl, { target:item.target, swap:item.swap });
                //htmx.swap(item.target, item.content, {swapStyle: item.swap });
                fetch(item.contentUrl, {
                    credentials: 'include',
                    method: 'get',
                })
                .then(response => response.text())
                .then(content => {
                    htmx.swap(item.target, content, { swapStyle: item.swap });
                })
                .catch((error) => {
                    console.error('Error:', error);
                });
            }
        });
        
    });
});