export { XTIPS_TYPE, XTIPS_TYPE_PRIVATE } from "../interface.uts"
import { defaultConfig, configCover } from "../libs/config.uts"
import { LoadFontFace } from "./loadFont.uts"
let maskerDom : null | HTMLDivElement = null;
let tid:number|null = 0
let currentOpts:XTIPS_TYPE | null = null;
export const hideTips = () => {
	if (maskerDom != null) {
		maskerDom.remove()
	}
	if(tid!=null){
		clearTimeout(tid!)
	}
	currentOpts?.close?.()
}
// @ts-ignore
export const showTips = (opts : XTIPS_TYPE | null) => {
	LoadFontFace()
	currentOpts = opts;
	if(tid!=null){
		clearTimeout(tid!)
		tid=null;
	}
	if (maskerDom != null) {
		maskerDom.remove()
	}
	// @ts-ignore
	let realopts = opts == null ? ({} as XTIPS_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 = config.position=='top'?'flex-start': "flex-end"
	maskerDom.style.zIndex = "10000"
	maskerDom.style.pointerEvents = config.maskDisableClik?'auto':"none"

	let contentWrapDiv = document.createElement("div")
	contentWrapDiv.style.padding = "8px 16px"
	contentWrapDiv.style.minWidth = config.size+"px"
	contentWrapDiv.style.maxWidth = "414px"
	if(config.position=='top'){
		contentWrapDiv.style.marginTop = config.offset+'px'
	}else if(config.position=='bottom'){
		contentWrapDiv.style.marginBottom = config.offset+'px'
	}
	
	// contentWrapDiv.style.height = "100px"
	if((config.iconCode!=''&&config.title!='')||(config.iconCode!=''&&config.title=='')){
		contentWrapDiv.style.minHeight = (Math.max(config.iconSize,config.titleSize))+"px"
	}
	contentWrapDiv.style.backgroundColor = config.contentBgColor
	contentWrapDiv.style.borderRadius = "8px"
	contentWrapDiv.style.boxSizing = "border-box"
	contentWrapDiv.style.display = "flex"
	contentWrapDiv.style.flexDirection = "row"
	contentWrapDiv.style.justifyContent = "center"
	contentWrapDiv.style.alignItems = "center"
	contentWrapDiv.style.lineHeight = "1"
	contentWrapDiv.className = 'xShowToasScaleAnimation'
	let textDiv = document.createElement("span")
	if(config.iconCode!=''){
		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 = 'xShowToasAnimation'
	}
	
	
	var anistr = `
	.xShowToasAnimation{
		animation-name: xUiToastIconAni;
		animation-duration: 1s;
		animation-timing-function: cubic-bezier(.42,.38,.15,.93);
	}
	.xShowToasScaleAnimation{
		animation-name: xUiToastIconAniScale;
		animation-duration: 0.3s;
		animation-timing-function: cubic-bezier(.42,.38,.15,.93);
	}
	@keyframes xUiToastIconAni {
		0% {
			transform: scale(0);
		}
	
		50% {
			transform: scale(1.2);
		}
		100% {
			transform: scale(1);
		}
	}
	@keyframes xUiToastIconAniScale {
		0% {
			transform: scale(0);
			opacity:0;
		}
	
		100% {
			transform: scale(1);
			opacity:1;
		}
	}
	`
	var styleDIv = document.getElementById('xUiToastIcon');
	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.paddingLeft = '10px'
		titleDiv.style.fontSize = config.titleSize + "px"
		titleDiv.style.color = config.titleColor
		contentWrapDiv.appendChild(titleDiv)
		titleDiv.style.textAlign = "center"
		titleDiv.style.wordBreak = "break-all"
		
	}

	maskerDom!.appendChild(contentWrapDiv)
	window.document.body.appendChild(maskerDom!)

	if(config.duration==0) return;
	tid = setTimeout(function() {
		tid = null;
		hideTips()
	}, (config.duration));
}