package styles

const (
	PublicOrigin = "https://cdn.sonr.id"
)

var (
	stylesHandle = templ.NewOnceHandle()
	alpineHandle = templ.NewOnceHandle()
	dexieHandle  = templ.NewOnceHandle()
	htmxHandle   = templ.NewOnceHandle()
)

templ Fonts() {
	<link rel="preload" href="https://cdn.sonr.id/fonts/ZTBrosOskon90s-BoldSemExp.woff2" as="font" type="font/woff2" crossorigin/>
	<link rel="preload" href="https://cdn.sonr.id/fonts/ZTBrosOskon90s-BoldSemExpIta.woff2" as="font" type="font/woff2" crossorigin/>
}

templ Styles() {
	<link href={ "https://cdn.sonr.id/css/styles.css" } rel="stylesheet"/>
}

templ Alpine() {
	<script src={ "https://cdn.sonr.id/js/alpine-focus.min.js" } defer></script>
	<script src={ "https://cdn.sonr.id/js/alpine.min.js" } defer></script>
}

templ Dexie() {
	<script src={ "https://cdn.sonr.id/js/dexie.min.js" }></script>
}

templ Htmx() {
	<script src={ "https://cdn.sonr.id/js/htmx.min.js" }></script>
}

templ Toaster() {
	<div
		x-data="{ 
            title: 'Default Toast Notification', 
            description: '',
            type: 'default',
            position: 'top-center',
            expanded: false,
            popToast (custom){
                let html = '';
                if(typeof custom != 'undefined'){
                    html = custom;
                }
                toast(this.title, { description: this.description, type: this.type, position: this.position, html: html })
            }
        }"
		x-init="
            window.toast = function(message, options = {}){
                let description = '';
                let type = 'default';
                let position = 'top-center';
                let html = '';
                if(typeof options.description != 'undefined') description = options.description;
                if(typeof options.type != 'undefined') type = options.type;
                if(typeof options.position != 'undefined') position = options.position;
                if(typeof options.html != 'undefined') html = options.html;
                window.dispatchEvent(new CustomEvent('toast-show', { detail : { type: type, message: message, description: description, position : position, html: html }}));
            }
        "
	>
		{ children... }
	</div>
}