import "./styles.css";
import React, { useEffect, useRef, useState } from "react";
import JSONEditor from "jsoneditor";
import "jsoneditor/dist/jsoneditor.css";

const JSONReact = ({ json, setValid, onChange }) => {
  const ref1 = useRef(null);
  const ref2 = useRef(null);

  useEffect(() => {
    const props = {
      onChangeText: (value) => {
        // console.log(value, 'vv')
        onChange(value);
      },
      onValidationError: (e) => {
        setValid(Boolean(!e.length));
      },
      modes: ["code"]
    };
    ref1.current = new JSONEditor(ref2.current, props);

    if (json) {
      ref1.current.set(json);
    }

    return () => {
      ref1.current.destroy();
    };
  }, []);

  return <div ref={ref2} />;
};

export default function App() {
  const [state, setState] = useState('{"cars": "22w-08w-23"}');
  const [valid, setValid] = useState(true);
  const onChange = (j) => {
    console.log(valid);
    // setState(j);
  };
  return (
    <div className="App">
      <JSONReact
        mode="code"
        onChange={onChange}
        json={JSON.parse(state)}
        setValid={setValid}
      />
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}