import { SFrame, _ } from "../../main.js";
import { fadein, fadeout } from "../../utils.js";

const call = async (stear, { find, resolve, render, call, event}, {text,titel=""}) => {
    event.onloaded = ()=> {
        fadein (find.main, 200, true);
        find.btn._.focus();
    }   
    event.onresolve = async () => await fadeout(find.main);

    return _({
        find: "main",
        class: "stear_alert",
        style: {
            position: "fixed",
            left: "0",
            top: "0",
            height: "100%",
            width: "100%",
            backgroundColor: "rgba(0,0,0,0.5)"
        }
    }, _({
        style: {
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            padding: "1rem",
            paddingTop: "0",
            position: "absolute",
            backgroundColor: "#eee",
            minHeight: "4rem",
            minWidth: "8rem",
            borderRadius: "1rem",
            textAlign: "center"
        }
    }, [
        _({ type: "h2", style: { marginBottom: 0 } }, titel),
        _({ type: "p" }, text),
        _({
            type: "button", 
            find: "btn", 
            event: { click: ()=>resolve() }, 
            style: {
                borderRadius: "0.5rem",
            }
        }, "OK"),
    ]));
}

export default new SFrame({
    preRender:true, call
});