import { bg, uiElement, floatingMenu, mainBar, text, modeNotInUse, padButtons } from "../../js/color";
import { JuPadBody, JuPadButtons } from "../../js/svg";
import showStatus from "../../stear/extra/Pages/showStatus";
import { SWindow, s, SFrame } from "../../stear/main";
import { fadein, fadeout, subCancel } from "../../stear/utils";


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

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

    return <div style={{
      width:  "calc(100% - 4rem)",
      height: "calc(100% - 4rem)",
      backgroundColor: floatingMenu,
      padding: "2rem",
      overflow:"auto",
      textAlign:"center"
    }}>
      <div style={{textAlign:"left"}}>
        <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>
      <svg xmlns="http://www.w3.org/2000/svg"
        style={{maxHeight:"calc(100% - 6rem)"}}
        viewBox="0 0 1920 1080">
        <path style={{ fill: uiElement }} d={JuPadBody} />

        {JuPadButtons.map((b,i)=><path id="clickable" style={{fill:padButtons}} event={{pointerdown:()=>void call(showStatus,{text:"clicked: "+i})}} d={b} />)}

      </svg>
      <label htmlFor="aniName">Animation Name: </label>
      <input id="aniName" type="text" value={animation.name} style={{
        height: "1rem", 
        border: "2px solid", 
        borderRadius: "0.5rem", 
        outline: "none", 
        padding:"0.5rem"}} 
        event = {{
          change:(e)=>{
            animation.name = e.target.value;
          }
        }}/>


    </div>;
  }
})