import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import React from 'react';
import { connect } from "../../redux";
import { Drawer } from '@whalecloud/fdx';
import { isPluginActive, getContent } from "../../selectors";
import styled from 'styled-components';
import { i18n } from '@fishx/i18n';
import { DrawerWrap, ListWrapper, ListWrap } from "./BlockStyle";
import { createBlockElements } from "../../utils";
import tplOnlyColumn from "./icons/tpl-2.png";
import tplColumns from "./icons/tpl-3.png";
var BottomRight = /*#__PURE__*/styled('div', {
  target: "ees31540",
  label: "BottomRight"
})({
  position: 'absolute',
  zIndex: 25,
  bottom: 20,
  right: 20
});

var AddBlock = function AddBlock(_ref) {
  var togglePlugin = _ref.togglePlugin,
      deactivatePlugin = _ref.deactivatePlugin,
      activateElement = _ref.activateElement,
      updateElement = _ref.updateElement,
      active = _ref.active,
      content = _ref.content,
      activeElement = _ref.activeElement;

  var onClose = function onClose() {
    deactivatePlugin({
      name: 'add-block'
    });
  };

  var addTargetBlock = function addTargetBlock(name) {
    var temp = content && typeof content.elements[Symbol.iterator] === 'function' ? _toConsumableArray(content.elements) : [];

    var element = _objectSpread(_objectSpread({}, content), {}, {
      elements: [].concat(_toConsumableArray(temp), [createBlockElements(name)])
    });

    updateElement({
      element: element
    });

    if (!activeElement && element.elements.length > 0 && element.elements[0].type === 'form') {
      activateElement({
        element: element.elements[0].id
      });
    }

    onClose();
  };

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(BottomRight, null), active && /*#__PURE__*/React.createElement(Drawer, {
    height: "100%",
    placement: "bottom",
    onClose: onClose,
    visible: active,
    className: DrawerWrap
  }, /*#__PURE__*/React.createElement("div", {
    className: "pt-12 w-full",
    style: {
      width: 780,
      margin: '0 auto'
    }
  }, /*#__PURE__*/React.createElement("h2", {
    className: "mx-4 my-4 font-bold color-black"
  }, i18n('PAGEBUIDER_FORM_TEMPLATE')), /*#__PURE__*/React.createElement("div", {
    className: "flex flex-row",
    style: {
      width: 550,
      margin: '40px auto 0'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: ListWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(ListWrap, " cursor-pointer p-2"),
    onClick: function onClick() {
      addTargetBlock('pb-editor-block-form-only-column');
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: tplOnlyColumn,
    alt: "",
    width: "100%",
    height: "200"
  })), /*#__PURE__*/React.createElement("div", {
    className: "my-2 text-center color-black font-bold",
    onClick: function onClick() {
      addTargetBlock('pb-editor-block-form-only-column');
    }
  }, i18n('PAGEBUIDER_FORM_TEMPLATE_COLUMN'))), /*#__PURE__*/React.createElement("div", {
    className: ListWrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(ListWrap, " cursor-pointer"),
    onClick: function onClick() {
      addTargetBlock('pb-editor-block-form-columns');
    }
  }, /*#__PURE__*/React.createElement("img", {
    src: tplColumns,
    alt: "",
    width: "100%",
    height: "200"
  })), /*#__PURE__*/React.createElement("div", {
    className: "my-2 text-center color-black font-bold",
    onClick: function onClick() {
      addTargetBlock('pb-editor-block-form-columns');
    }
  }, i18n('PAGEBUIDER_FORM_TEMPLATE_COLUMNS')))))));
};

var mapStateToProps = function mapStateToProps(state) {
  return {
    content: getContent(state),
    active: isPluginActive('add-block')(state),
    activeElement: state.ui.activeElement
  };
};

var mapDispatchToProps = function mapDispatchToProps(dispatch) {
  return {
    togglePlugin: function togglePlugin(payload) {
      dispatch({
        type: 'ui/togglePlugin',
        payload: payload
      });
    },
    deactivatePlugin: function deactivatePlugin(payload) {
      dispatch({
        type: 'ui/deactivatePlugin',
        payload: payload
      });
    },
    activateElement: function activateElement(payload) {
      dispatch({
        type: 'ui/activatePageElement',
        payload: payload
      });
    },
    updateElement: function updateElement(payload) {
      dispatch({
        type: 'appBuilder/updateAndFlattenElement',
        payload: payload
      });
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(AddBlock);
//# sourceMappingURL=AddBlock.js.map