import _Button from "@alifd/next/es/button";
import _extends from "@babel/runtime/helpers/extends";
import _Message from "@alifd/next/es/message";
import React, { useEffect, useState } from 'react';
import { project, material } from "@alilc/lowcode-engine";
import MonacoEditor from "@ali/lowcode-plugin-base-monaco-editor";
import './index.scss';
var isNewEngineVersion = !!material;
var style = {
  height: 'calc(100% - 80px)'
};
var defaultEditorOption = {
  language: 'json',
  readOnly: false,
  automaticLayout: true,
  folding: true,
  // 默认开启折叠代码功能
  lineNumbers: "on",
  wordWrap: "off",
  formatOnPaste: true,
  fontSize: 12,
  tabSize: 2,
  scrollBeyondLastLine: false,
  fixedOverflowWidgets: false,
  snippetSuggestions: "top",
  minimap: {
    enabled: false
  },
  scrollbar: {
    vertical: "auto",
    horizontal: "auto"
  }
};

var getCurrentSchema = function getCurrentSchema() {
  return JSON.stringify(isNewEngineVersion ? project.exportSchema() : project.getSchema(), null, 2);
};

function SchemaPane(props) {
  if (props && props.width) {
    style.width = props.width;
  }

  var schema = getCurrentSchema();

  var _useState = useState(schema),
      value = _useState[0],
      setValue = _useState[1];

  useEffect(function () {
    setValue(getCurrentSchema());
  }, [schema]);

  function onImport() {
    var content = {};

    try {
      content = JSON.parse(value);
    } catch (e) {
      _Message.error('schema解析失败');

      return;
    }

    if (isNewEngineVersion) {
      project.importSchema(content);
    } else {
      project.load(content, true);
    }

    _Message.success('导入 schema 成功');
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "dataProcess"
  }, /*#__PURE__*/React.createElement("p", {
    className: "title"
  }, "\u606D\u559C\u60A8\u53D1\u73B0\u300C\u9AD8\u7EA7\u529F\u80FD\u300D, \u8BF7\u8C28\u614E\u64CD\u4F5C"), /*#__PURE__*/React.createElement(MonacoEditor, _extends({}, defaultEditorOption, {
    value: value,
    style: style,
    onChange: setValue
  })), /*#__PURE__*/React.createElement("div", {
    className: "actions"
  }, /*#__PURE__*/React.createElement(_Button, {
    onClick: onImport,
    type: "primary"
  }, "\u5BFC\u5165 Schema")));
}

export var schemaPaneRegistry = function schemaPaneRegistry(ctx) {
  return {
    name: "schema-pane-registry",
    init: function init() {
      var schemaDock = ctx.skeleton.add({
        name: "schemaPane",
        area: "leftArea",
        type: "PanelDock",
        props: {
          align: "bottom",
          icon: "code_open",
          description: "页面源码"
        },
        panelProps: {
          width: 600
        },
        content: SchemaPane
      });
      schemaDock && schemaDock.disable();

      if (isNewEngineVersion) {
        project.onSimulatorRendererReady(function () {
          schemaDock.enable();
        });
      } else {
        project.onRendererReady(function () {
          schemaDock.enable();
        });
      }
    }
  };
};
schemaPaneRegistry.pluginName = 'schemaPaneRegistry';
export default schemaPaneRegistry;