import Editor, { loader, EditorProps, Monaco } from "@monaco-editor/react";
import { CSS } from "@stitches/react";
import type monaco from "monaco-editor";
import { useTheme } from "next-themes";
import { FC, MutableRefObject, ReactNode } from "react";
import { Flex } from ".";
import dark from "../theme/editor/amy.json";
import light from "../theme/editor/xcode_default.json";

export type MonacoProps = EditorProps & {
  id?: string;
  rootProps?: { css: CSS } & Record<string, any>;
  overlay?: ReactNode;
  editorRef?: MutableRefObject<monaco.editor.IStandaloneCodeEditor>;
  monacoRef?: MutableRefObject<typeof monaco>;
};

loader.config({
  paths: {
    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.30.1/min/vs",
  },
});

const Monaco: FC<MonacoProps> = ({
  id,
  path = `file:///${id}`,
  className = id,
  language = "json",
  overlay,
  editorRef,
  monacoRef,
  beforeMount,
  rootProps,
  ...rest
}) => {
  const { theme } = useTheme();
  const setTheme = (monaco: Monaco) => {
    monaco.editor.defineTheme("dark", dark as any);
    monaco.editor.defineTheme("light", light as any);
  };
  return (
    <Flex
      fluid
      column
      {...rootProps}
      css={{
        position: "relative",
        height: "100%",
        ...rootProps?.css,
      }}
    >
      <Editor
        className={className}
        language={language}
        path={path}
        beforeMount={monaco => {
          beforeMount?.(monaco);

          setTheme(monaco);
        }}
        theme={theme === "dark" ? "dark" : "light"}
        {...rest}
      />
      {overlay && (
        <Flex
          css={{ position: "absolute", bottom: 0, right: 0, width: "100%" }}
        >
          {overlay}
        </Flex>
      )}
    </Flex>
  );
};

export default Monaco;