import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from "react";
import { connect } from "../../redux";
import classSet from "classnames";
import { ActionCreators } from "redux-undo";
import { Input } from '@whalecloud/fdx';
import { i18n } from '@fishx/i18n';
import { ReactComponent as SearchIcon } from "@svgr/webpack!../../assets/icons/input-search-icon.svg";
import { ReactComponent as LeftIcon } from "@svgr/webpack!../../assets/icons/menu-left-icon.svg";
import { ReactComponent as RightIcon } from "@svgr/webpack!../../assets/icons/menu-right-icon.svg";
import { css } from 'emotion';
import { getUi } from "../../selectors";
import "./Editor.less"; // Components

import EditorBar from "./Bar";
import EditorToolbar from "./Toolbar";
import EditorContent from "./Content";
import EditorProperty from "./Setting";

var EditorComponent = function EditorComponent(_ref) {
  var save = _ref.save,
      addon = _ref.addon,
      _ref$isHelp = _ref.isHelp,
      isHelp = _ref$isHelp === void 0 ? true : _ref$isHelp,
      showProperty = _ref.showProperty;

  // const { addKeyHandler, removeKeyHandler } = useKeyHandler();
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      menuCollapse = _useState2[0],
      setMenuCollapse = _useState2[1];

  var classes = {
    "h-full": true,
    "pb-editor": true,
    "formbuilder-bg": true
  };
  var contentHeight = /*#__PURE__*/css({
    height: 'calc(100% - 0px)'
  }, "label:contentHeight;");
  return /*#__PURE__*/React.createElement("div", {
    className: classSet(classes)
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex flex-col h-full"
  }, /*#__PURE__*/React.createElement("div", {
    className: "flex flex-row ".concat(contentHeight, " webiny-ui-content lowcode-builder_wrap")
  }, /*#__PURE__*/React.createElement("div", {
    className: "overflow-hidden border-solid border-0 border-r h-full formbuilder-border-dark-color formbuilder-toolbar-wrap lowcode-builder_toolbar ".concat(menuCollapse ? 'lowcode-builder_menu_collapse' : '')
  }, /*#__PURE__*/React.createElement("div", {
    className: "lowcode-builder_search"
  }, !menuCollapse && /*#__PURE__*/React.createElement(Input, {
    placeholder: "".concat(i18n('PAGEBUIDER_TOOLBAR_SEARCH'), "...(Ctrl+E)"),
    bordered: false,
    prefix: /*#__PURE__*/React.createElement(SearchIcon, null)
  }), !menuCollapse && /*#__PURE__*/React.createElement(LeftIcon, {
    className: "lowcode-builder_collapse",
    onClick: function onClick() {
      return setMenuCollapse(true);
    }
  }), menuCollapse && /*#__PURE__*/React.createElement(RightIcon, {
    className: "lowcode-builder_collapse",
    onClick: function onClick() {
      return setMenuCollapse(false);
    }
  })), /*#__PURE__*/React.createElement(EditorToolbar, null)), /*#__PURE__*/React.createElement("div", {
    className: "w-full flex flex-row overflow-hidden flex-1"
  }, /*#__PURE__*/React.createElement("div", {
    className: "w-full h-full flex flex-col relative"
  }, /*#__PURE__*/React.createElement("div", {
    className: "h-6 overflow-hidden formbuilder-border-color formbuilder-title-bg relative"
  }, /*#__PURE__*/React.createElement(EditorBar, {
    save: save,
    addon: addon
  })), /*#__PURE__*/React.createElement(EditorContent, null))), showProperty && /*#__PURE__*/React.createElement("div", {
    className: "overflow-hidden border-solid border-0 border-l h-full border-gray-300"
  }, /*#__PURE__*/React.createElement(EditorProperty, {
    isHelp: isHelp
  })))));
};

export var Editor = connect(function (state) {
  var ui = getUi(state);
  return {
    slateFocused: ui.slateFocused
  };
}, {
  undo: ActionCreators.undo,
  redo: ActionCreators.redo
})( /*#__PURE__*/React.memo(EditorComponent));
//# sourceMappingURL=Editor.js.map