import { Stear, _ } from "../stear/main.js";
import { fadein, fadeout, wait } from "../stear/utils.js";

export const preRender = true;

export const render = ({},{}) => {
    var wobel = Stear.addAnimation({
        "0%":{
            transform: "translate(-50%, -50%) scale(100%)"
        },
        "50%": {
            transform: "translate(-50%, -50%) scale(110%)"
        },
        "100%": {
            transform: "translate(-50%, -50%) scale(100%)"
        }
    });
    console.log(wobel)

    return _({style:{zindex:1000},find:"main"}, [
        _({type:"img",src:"http://localhost:82/images/logo.png",style:{
            width: "80vw",
            maxWidth: "75vh",
            position: "absolute",
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            animation: `${wobel} 2s ease-in-out 0s infinite`,

        }})
    ]);
}

export const call = (stear, { find, resolve, render, call }, args) => {
    document.addEventListener('deviceready', async ()=>{
        await wait(Math.max(1, 1000 - performance.now()));
        await fadeout(find.main._);
        call(stear.g("connect"),{id:"123-456",name:"Device"});
        resolve();
    }, false);
}