import { useState } from "react";
import { convertStringToBeautifyJson } from "../utils/convertStringToBeautifyJson";
import Editor from "react-simple-code-editor";
import Prism from "prismjs";
import "prismjs/themes/prism.css";

interface Props {
  value: any;
  setValue: (value: any) => void;
}

export function InputObject({ value, setValue }: Props) {
  const [text, setText] = useState(convertStringToBeautifyJson(value));

  return (
    <Editor
      value={text}
      onBlur={() => {
        setText(convertStringToBeautifyJson(value));
      }}
      onValueChange={(code) => {
        setText(code);
        try {
          setValue(JSON.parse(code));
        } catch (e) {}
      }}
      highlight={(code) =>
        Prism.highlight(code, Prism.languages.javascript, "javascript")
      }
      padding={10}
      style={{
        fontFamily: '"Fira code", "Fira Mono", monospace',
        fontSize: 12,
      }}
      className="component-book cb-px-2 cb-py-1 cb-border cb-border-solid cb-border-slate-200 dark:cb-border-slate-700 cb-w-full"
    />
  );
}