import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _get from "lodash/get";
import React from "react";
import { i18n } from '@fishx/i18n';
import { set } from "dot-prop-immutable";
import { connect } from "../../../redux";
import { useHandler } from "../../../../hooks/useHandler";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { Input } from "@webiny/ui/Input";
import { InputContainer } from "../components/StyledComponents";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Form } from "@webiny/form";
import { getActiveElementWithChildren } from "../../../selectors";

var validateWidth = function validateWidth(value) {
  if (!value) {
    return null;
  }

  if (isNaN(parseInt(value))) {
    throw Error("Enter a valid number!");
  }

  if (value.endsWith("%") || value.endsWith("px")) {
    return true;
  }

  throw Error("Specify % or px!");
};

var Settings = function Settings(props) {
  var updateSettings = useHandler(props, function (_ref) {
    var element = _ref.element,
        updateElement = _ref.updateElement;
    return /*#__PURE__*/function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, form) {
        var valid, attrKey, newElement;
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return form.validate();

              case 2:
                valid = _context.sent;

                if (valid) {
                  _context.next = 5;
                  break;
                }

                return _context.abrupt("return");

              case 5:
                attrKey = "data.settings.width";
                newElement = set(element, attrKey, data);
                updateElement({
                  element: newElement
                });

              case 8:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));

      return function (_x, _x2) {
        return _ref2.apply(this, arguments);
      };
    }();
  });
  var data = props.element.data;

  var settings = _get(data, "settings.width", {
    value: "100%"
  });

  return /*#__PURE__*/React.createElement(Form, {
    data: settings,
    onChange: updateSettings
  }, function (_ref3) {
    var Bind = _ref3.Bind;
    return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
      label: i18n('PAGEBUIDER_SETTINGS_WIDTH')
    }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
      span: 5
    }, /*#__PURE__*/React.createElement(Typography, {
      use: "overline"
    }, i18n('PAGEBUIDER_SETTINGS_WIDTH'))), /*#__PURE__*/React.createElement(Cell, {
      span: 7
    }, /*#__PURE__*/React.createElement(InputContainer, {
      width: "auto",
      margin: 0
    }, /*#__PURE__*/React.createElement(Bind, {
      name: "value",
      validators: validateWidth
    }, /*#__PURE__*/React.createElement(Input, null)))))));
  });
};

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

export default connect(function (state) {
  return {
    element: getActiveElementWithChildren(state)
  };
}, mapDispatchToProps)(Settings);
//# sourceMappingURL=Settings.js.map