import { FC } from "@curi/react-universal/node_modules/@types/react";
import { FieldConfig, useField } from "formik";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-yaml";
import "ace-builds/src-noconflict/theme-github";
import { styled } from "@mui/system";

const Editor: FC<FieldConfig<string> & { label?: string; className?: string }> =
  ({ label, className, ...props }) => {
    const [field, , helper] = useField(props);
    return (
      <AceEditor
        className={className}
        style={{ width: "100%" }}
        {...field}
        onChange={(value) => helper.setValue(value)}
        {...props}
        mode="yaml"
        theme="github"
        editorProps={{ $blockScrolling: true }}
      />
    );
  };

export const YamlEditor = Editor;
styled(Editor)(({ theme }) => ({
  marginBottom: theme.spacing(2),
}));