export {XLOADINGS_TYPE,XLOADINGS_TYPE_PRIVATE} from "../interface.uts"
import {defaultConfig,configCover} from "../libs/config.uts"
import { LoadFontFace } from "./loadFont.uts"
let maskerDom : null | HTMLDivElement = null;



// @ts-ignore
export const showLoading = (opts : XLOADINGS_TYPE|null) => {
	LoadFontFace()
	if (maskerDom != null) {
		maskerDom.remove()
	}
	// @ts-ignore
	let realopts = opts==null?({} as XLOADINGS_TYPE):(opts!)
	let config = configCover(realopts)
	
	maskerDom = document.createElement("div")
	if (maskerDom == null)  return;
	maskerDom.style.setProperty("background-color", config.maskBgColor)
	maskerDom.style.setProperty("position", "fixed")
	maskerDom.style.setProperty("left", "0px")
	maskerDom.style.setProperty("top", "0px")
	maskerDom.style.setProperty("width", "100%")
	maskerDom.style.setProperty("height", "100%")
	maskerDom.style.display = "flex"
	maskerDom.style.flexDirection = "row"
	maskerDom.style.justifyContent = "center"
	maskerDom.style.alignItems = "center"
	maskerDom.style.zIndex = "10000"

	let contentWrapDiv = document.createElement("div")
	contentWrapDiv.style.padding = "16px"
	contentWrapDiv.style.width = config.size+"px"
	// contentWrapDiv.style.height = "100px"
	contentWrapDiv.style.minHeight = config.size+"px"
	contentWrapDiv.style.backgroundColor = config.contentBgColor
	contentWrapDiv.style.borderRadius = "16px"
	contentWrapDiv.style.boxSizing = "border-box"
	contentWrapDiv.style.display = "flex"
	contentWrapDiv.style.flexDirection = "column"
	contentWrapDiv.style.justifyContent = "center"
	contentWrapDiv.style.alignItems = "center"
	contentWrapDiv.style.transition = 'all 0.3s'
	contentWrapDiv.style.scale = '0'
	let textDiv = document.createElement("span")

	textDiv.innerText = String.fromCharCode(parseInt(config.iconCode, 16));
	textDiv.style.fontFamily = "remixicon"
	textDiv.style.fontSize = config.iconSize+"px"
	textDiv.style.color = config.iconColor
	textDiv.className = 'xShowLoadingAnimation'


	var anistr = `
	.xShowLoadingAnimation{
		animation-name: xShowLoadingAnimation;
		animation-duration: 1.2s;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	
	@keyframes xShowLoadingAnimation {
		0% {
			transform: rotate(0deg);
		}
	
		100% {
			transform: rotate(360deg);
		}
	}
	`
	var styleDIv = document.getElementById('xUiLoadWeingIcon');
	if (!styleDIv) {
		let style = document.createElement("style");
		style.id = 'xUiLoadWeingIcon'
		document.head.appendChild(style)
		styleDIv = style;
	}
	let sheet = styleDIv.sheet;
	if (sheet.cssRules.length == 0) {
		styleDIv.append(anistr)
	}
	
	contentWrapDiv.appendChild(textDiv)
	
	if(config.title!=''){
		let titleDiv = document.createElement("span")
		titleDiv.innerText = config.title;
		titleDiv.style.fontSize=config.titleSize+"px"
		titleDiv.style.color= config.titleColor
		contentWrapDiv.appendChild(titleDiv)
		titleDiv.style.textAlign = "center"
	}
	
	maskerDom!.appendChild(contentWrapDiv)
	window.document.body.appendChild(maskerDom!)
	
	try{
		setTimeout(function() {
			contentWrapDiv.style.scale = '1'
		}, 10);
	}catch(e){
		//TODO handle the exception
	}
}

export const hideXloading = ()=>{
	if(maskerDom!=null){
		maskerDom.remove()
	}
}