import { useGlobal } from "web-utils";
import { jscript } from "../../../../../utils/script/jscript";
import { Loading } from "../../../../../utils/ui/loading";
import { Modal } from "../../../../../utils/ui/modal";
import { EDGlobal, active } from "../../../logic/ed-global";
import { ScriptWorkbench } from "./workbench";

export const EdPopScript = () => {
  const p = useGlobal(EDGlobal, "EDITOR");
  return (
    <>
      <Modal
        open={p.ui.popup.script.open}
        onOpenChange={(open) => {
          if (!open) {
            p.ui.popup.script.open = false;
            active.prop_name = "";
            p.render();
          }
        }}
      >
        <div className={cx("bg-white select-none flex fixed inset-[50px]")}>
          <div
            className={cx(
              "flex flex-1 relative",
              css`
                .monaco-editor {
                  .mtk9 {
                    color: #022f62;
                  }
                  .mtk1 {
                    color: #022f62;
                  }
                  .mtk22 {
                    color: #015cc5;
                  }
                  .mtk8 {
                    color: #015cc5;
                  }
                  .mtk5 {
                    color: #55bb8a;
                  }
                  .monaco-editor.showUnused .squiggly-inline-unnecessary {
                    opacity: 0.4;
                  }
                  .jsx-expression-braces {
                    color: #7c3813;
                  }
                  .jsx-tag-angle-bracket {
                    color: #619ac3;
                  }
                  .jsx-tag-name {
                    color: #619ac3;
                  }
                  .jsx-tag-order-1 {
                    color: #23863a;
                  }
                  .jsx-tag-order-2 {
                    color: #4e7ca1;
                  }
                  .jsx-tag-order-3 {
                    color: #020360;
                  }
                  .jsx-tag-attribute-key {
                    color: #6f42c1;
                  }
                  .jsx-text {
                    color: #000000;
                  }
                }
              `
            )}
          >
            {(!jscript.editor || !jscript.build) && (
              <>
                {!jscript.editor && !jscript.build && (
                  <Loading note={"js-code"} backdrop={false} />
                )}
                {!jscript.editor && jscript.build && (
                  <Loading note={"js-editor"} backdrop={false} />
                )}
                {!jscript.build && jscript.editor && (
                  <Loading note={"js-build"} backdrop={false} />
                )}
              </>
            )}

            {jscript.editor && jscript.build && <ScriptWorkbench />}
          </div>
        </div>
      </Modal>
    </>
  );
};