import { bg, floatingBtn, floatingMenu, text } from "../../js/color";
import { SWindow, s, SFrame } from "../../stear/main";
import { fadein, fadeout,subCancel } from "../../stear/utils";


export default new SFrame({
    call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
        event.onloaded = ()=>{
            fadein(find.main,200,true);
        }        
        event.onresolve = async () => {
            await fadeout(find.main);
        }

        let cancelSub = subCancel(()=>{
            resolve(false);
        })

        return <div find="main" style={{ background: "rgba(0,0,0,0.3)", height: "100%", width: "100%", position:"absolute",opacity:0}}>
            <div style={{
                minWidth: "75%",
                minHeight: "75%",
                backgroundColor: floatingMenu,
                borderRadius: "4rem",
                padding: "2rem",
                top: "50%", left: "50%", 
                position: "absolute",
                transform: "translate(-50%,-50%)"
            }}>
                <div style={{}}>
                    <div style={{
                            fontSize: "2rem",
                            padding: "0.1rem",
                            display: "unset",
                            backgroundColor: text,
                            backgroundClip: "text",
                            webkitBackgroundClip: "text",
                            color: "transparent",
                            cursor:"pointer",
                            userSelect: "none",
                    }}
                    event={{pointerdown:()=>{
                        cancelSub();
                        resolve(false);
                    }}}>❌</div>
                
                </div>
            </div>
        </div>;
    }
})