import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState, useEffect } from "react";
import { Modal, SimpleForm as Form, Input, Spin } from '@whalecloud/fdx';
import { i18n } from '@fishx/i18n';
import Editor from '@monaco-editor/react';
import "../../index.module.less";

var ModalAddClass = function ModalAddClass(props) {
  var form = props.form,
      _props$visible = props.visible,
      visible = _props$visible === void 0 ? false : _props$visible,
      handleModalVisible = props.handleModalVisible,
      handleFormSubmit = props.handleFormSubmit,
      themeClass = props.themeClass;

  var _useState = useState(''),
      _useState2 = _slicedToArray(_useState, 2),
      customClass = _useState2[0],
      setCustomClass = _useState2[1];

  useEffect(function () {
    form.resetFields();
    setCustomClass('');
  }, [visible]);

  var customClassChange = function customClassChange(e) {
    setCustomClass(e.target.value);
  };

  return /*#__PURE__*/React.createElement(Modal, {
    title: i18n('PAGEBUILDER_STYLE_NEW_CLASS'),
    visible: visible,
    onOk: function onOk() {
      return handleFormSubmit(form);
    },
    onCancel: function onCancel() {
      return handleModalVisible(false);
    },
    destroyOnClose: true
  }, /*#__PURE__*/React.createElement(Form, {
    form: form,
    size: "small",
    layout: "vertical"
  }, /*#__PURE__*/React.createElement(Form.Item, {
    name: "customClass",
    label: i18n('PAGEBUILDER_STYLE_NEW_CLASS_INPUT_TIPS')
  }, /*#__PURE__*/React.createElement(Input, {
    onChange: customClassChange
  }))), /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUILDER_STYLE_NEW_CLASS_INPUT_DESCRIPTION')), /*#__PURE__*/React.createElement("p", null, i18n('PAGEBUILDER_STYLE_USE_DESCRIPTION')), /*#__PURE__*/React.createElement("div", {
    style: {
      height: 100
    }
  }, /*#__PURE__*/React.createElement(Editor, {
    className: "formbuild-style-editorWrap",
    options: {
      readOnly: true,
      lineNumbers: "off",
      roundedSelection: false
    },
    theme: 'light',
    language: 'html',
    loading: /*#__PURE__*/React.createElement(Spin, null),
    value: "<div className=\"".concat(customClass, "\">text</div>")
  })));
};

export default ModalAddClass;
//# sourceMappingURL=index.js.map