import React from 'react';
import { connect } from "../../../redux";
import { css } from 'emotion';
import { getContent } from "../../../selectors";
import { IconButton } from '@webiny/ui/Button'; // import { ReactComponent as SaveIcon } from "../save_alt_24px_rounded.svg";

import { ReactComponent as ImportIcon } from "@svgr/webpack!./icons/icon_import.svg";
import { Tooltip } from "@webiny/ui/Tooltip";
import { jsonToFromElement } from "../../../../utils/util";
var activeStyle = /*#__PURE__*/css({
  marginTop: '-8px',
  svg: {
    color: '#a0aec0 !important'
  },
  '.mdc-icon-button__icon': {
    color: 'var(--mdc-theme-primary)'
  },
  display: 'block !important',
  '&:hover, &:focus': {
    background: 'none !important',
    svg: {
      color: '#00ccb0 !important'
    },
    '&:after,&:before': {
      display: 'none'
    }
  }
}, "label:activeStyle;");
var tooltipStyle = /*#__PURE__*/css({
  position: 'absolute',
  top: '-2px',
  left: '48px'
}, "label:tooltipStyle;");

var PageImportButton = function PageImportButton(_ref) {
  var content = _ref.content;

  var handleClick = function handleClick() {
    // const xml = jsonToxml(cloneDeep(content));
    // const formattedXml = format(xml, {
    //   indentation: '  ',
    //   collapseContent: true,
    //   lineSeparator: '\n',
    // });
    // setTpl(formattedXml);
    // save page
    // const getFormInfo = jsonToFromSetting(content);
    // const pageJson = JSON.stringify(Object.keys(getFormInfo).length > 0 ? getFormInfo[content.elements[0].id] : {});
    var pageJson = JSON.stringify(content);
    var getForm = jsonToFromElement(content);
    var pageElementListJson = {};
    pageElementListJson.formElements = Object.keys(getForm).length > 0 ? getForm[content.elements[0].id] : [];
    var pageElementListJsonNew = JSON.stringify(pageElementListJson);
    savePage(pageJson, pageElementListJsonNew);
  };

  var savePage = function savePage(pageJson, pageElementListJson) {
    console.log(JSON.parse(pageJson), 'This is form settings');
    console.log(JSON.parse(pageElementListJson), 'This is form element list');
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
    content: "Import Page",
    placement: "right",
    className: tooltipStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    icon: /*#__PURE__*/React.createElement(ImportIcon, null),
    className: activeStyle,
    onClick: function onClick() {
      return handleClick();
    }
  })));
};

export default connect(function (state) {
  return {
    content: getContent(state)
  };
})(PageImportButton);
//# sourceMappingURL=PageImportButton.js.map