import React, { useState } from 'react';
import { Input } from 'antd';
import { str2obj } from './Form/helpers';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const JsonEditor = props => {
  const {
    value,
    onChange,
    onFormValueChange,
    onSave = () => {}
  } = props;
  const [errMsg, setErrMsg] = useState('');
  const handleChange = event => {
    onChange(event.target.value);
    setErrMsg('');
    try {
      const obj = str2obj(event.target.value);
      onFormValueChange(obj);
    } catch (error) {
      setErrMsg(`There is something wrong in JSON text, detail: ${error.message}`);
    }
  };
  const handleKeyDown = event => {
    if (event.code === 'KeyS' && event.metaKey) {
      event.preventDefault();
      onSave();
    }
  };
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx(Input.TextArea, {
      autoSize: true,
      status: errMsg ? 'error' : '',
      value: value,
      onChange: handleChange,
      onKeyDown: handleKeyDown
    }), errMsg && /*#__PURE__*/_jsx("div", {
      style: {
        color: 'red'
      },
      children: errMsg
    })]
  });
};
export default JsonEditor;
//# sourceMappingURL=JsonEditor.js.map