import { bg, uiElement, text } from "../../js/color";
import prompt from "../../stear/extra/Pages/prompt";
import showStatus from "../../stear/extra/Pages/showStatus";
import { SWindow, s } from "../../stear/main";
import animation from "./animation";

let ledAnimation = [
    {
        name: "test1123424242424242424242424242424242424242424242424242424242424",
        buttons: [
            {
                clock: 0,
                offset: 0,
                animation: 0
            }
        ],
        animations: [
            {
                name: "default on",
                steps: [{
                    slow: false,
                    time: 1000,
                    color: [100, 100, 100]
                }]
            }
        ]

    }
];

export default new SWindow({
    call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
        return <div style={{
            display: "flex", height: "100%", width: "100%", flexDirection: "row"
        }}>
            <div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>
                <h1 style={{ minHeight: "2rem", lineHeight: "2rem" }}>Animationen
                    <div style={{
                        float: "right", borderRadius: "50%",
                        height: "2rem", width: "2rem",
                        backgroundColor: uiElement, fontSize: "2rem",
                        userSelect: "none", textAlign: "center",
                        lineHeight: "normal", cursor: "pointer"
                    }} event={{
                        click: () => {
                            call(prompt, { text: "Name für neue Animation:" }).then(state => {
                                if (state != false) {
                                    let ledAni = { name: state, buttons: [], animations: [] };
                                    ledAnimation.push(ledAni);
                                    call(animation, ledAni, false);
                                    render();
                                }
                            })
                        }
                    }}>+</div>
                </h1>
                <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "0.5rem" }}>
                    {() => ledAnimation.map((e, i) => <div style={{
                        backgroundColor: uiElement,
                        cursor: "pointer",
                        padding: "0.5rem 1rem",
                        borderRadius: "1rem",
                        alignItems: "center",
                        userSelect: "none",
                        display: "flex",
                        gap: "0.5rem"
                    }} event={{
                        pointerdown: () => {
                            call(showStatus, { text: "using: " + e.name, color: "green" });
                        }
                    }}>
                        <label style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", paddingTop: "0.25rem", width: "calc(100% - 5rem)" }}>{e.name}</label>


                        <div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
                            event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); call(animation, e, false).then(()=>void render()) } }}>e</div>
                        <div style={{ backgroundColor: "rgba(0,0,0,0.2)", padding: "0.5rem", borderRadius: "50%", height: "1rem", width: "1rem" }}
                            event={{ pointerdown: (e)=>void e.stopPropagation(), click: (event) => { event.stopPropagation(); ledAnimation.splice(i, 1); render(); } }}>x</div>
                    </div>)}
                </div>
            </div>
            <div style={{ height: "100%", width: "0.25rem", backgroundColor: text }}></div>
            <div style={{ height: "calc(100% - 2rem)", width: "calc(50% - 2rem)", padding: "1rem" }}>

            </div>
        </div>;
    },
    backgroundColor: "transparent"
})