import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from "react";
import Box from "@material-ui/core/Box";
import AceEditor from "react-ace";
import SimpleDialog from "../SimpleDialog";
export default (function (_ref) {
  var open = _ref.open,
      sampleIndex = _ref.sampleIndex,
      sampleInput = _ref.sampleInput,
      _onChange = _ref.onChange,
      onClose = _ref.onClose;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      text = _useState2[0],
      changeText = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      error = _useState4[0],
      changeError = _useState4[1];

  useEffect(function () {
    var newText = JSON.stringify(sampleInput, null, "  ");

    if (newText !== text) {
      changeText(newText);
      changeError(null);
    }
  }, [sampleIndex, sampleInput, text]);
  return /*#__PURE__*/React.createElement(SimpleDialog, {
    open: open,
    onClose: onClose,
    title: "samples[".concat(sampleIndex, "]")
  }, /*#__PURE__*/React.createElement(AceEditor, {
    theme: "github",
    mode: "javascript",
    width: "100%",
    value: text,
    editorProps: {
      $blockScrolling: Infinity
    },
    onChange: function onChange(t) {
      changeText(t);
      changeError(null);

      try {
        _onChange(JSON.parse(t));
      } catch (e) {
        changeError(e.toString());
      }
    }
  }), /*#__PURE__*/React.createElement(Box, {
    color: "red"
  }, error));
});