import * as color from "../js/color.js";
import { Stear, SWindow, _, s } from "../stear/main.js";
import { fadein } from "../stear/utils.js";
import remote from "./remote/remote.jsx";

const pool = Stear.addLanguagePool("home");
const connected = pool.add("conncted", "Connected to: {}");
const connect = pool.add("connect", "Connect");
const connectionlost = pool.add("connectionlost", "Connection lost from: {}");

export default new SWindow({
    call: async (stear, { find, resolve, close, render, call, event, include }, args) => {

        event.onloaded = () => {
            fadein(find.main, 200, true);
        }

        let mode = 0;
        let window = 0;

        let wins = [
            include(remote)
        ];
        let show = 0;

        return <div style={{ display: 'flex', flexDirection: "column", height: "100%", alignItems: "center" }}>
            <div style={{ backgroundColor: color.mainBar, width: "100%", height: "5rem", display: "flex",alignItems: "center", boxShadow: "rgba(50, 50, 50, 0.2) 0px 8px 24px"}}>
                <div style={{ display: "flex",  height: "100%", flexDirection: "row", alignItems: "center", gap: "0.5rem", paddingLeft: "0.5rem", width:"100%" }} find="menu">
                    {() => {
                        console.log("rerender");
                        return ["#0f0", "#00f", "#ff0"].map((d, i) => {

                            return <div style={
                                { height: "2rem", 
                                width: "2rem", 
                                borderRadius: "2rem", 
                                backgroundColor: d, 
                                border: "5px solid " + (mode == i ? color.modeInUse() : color.modeNotInUse()) }
                            } event={{
                                pointerdown: () => {
                                    mode = i;
                                    find.menu.rerender();
                                }
                            }}></div>;
                        });
                    }}
                </div>
                <label style={{width:"100%",textAlign:"center",fontSize:"2rem"}}>JuPad</label>
                <div style={{width:"100%",textAlign:"right",paddingRight:"0.5rem"}} >rigth</div>
            </div>
            <div style={{ width: "100%", height: "100%", position: "relative"}}>
                    {()=>{
                        wins[show].opts.render();
                        return wins[show].render({
                            style: {
                                height: "100%",
                                width: "100%"
                            }
                        });
                    }}
            </div>
        </div>;
    }, backgroundColor: color.bg
});