import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _isEqual from "lodash/isEqual";
import * as React from "react";
import { connect } from "../../../redux";
import { get, merge } from "dot-prop-immutable";
import { Tabs, Tab } from "@webiny/ui/Tabs";
import { Switch } from "@webiny/ui/Switch";
import { Input } from "@webiny/ui/Input";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Typography } from "@webiny/ui/Typography";
import { withActiveElement } from "../../../components";
import { DelayedOnChange } from "../../../components/DelayedOnChange";
import { Form } from "@webiny/form";
import { validation } from "@webiny/validation";

var LinkSettings = /*#__PURE__*/function (_React$Component) {
  _inherits(LinkSettings, _React$Component);

  var _super = _createSuper(LinkSettings);

  function LinkSettings() {
    var _this;

    _classCallCheck(this, LinkSettings);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));

    _defineProperty(_assertThisInitialized(_this), "historyUpdated", {});

    _defineProperty(_assertThisInitialized(_this), "updateSettings", function (data) {
      var _this$props = _this.props,
          element = _this$props.element,
          updateElement = _this$props.updateElement;
      var attrKey = "data.link";
      var newElement = merge(element, attrKey, data);
      updateElement({
        element: newElement
      });

      if (!_isEqual(_this.historyUpdated, data)) {
        _this.historyUpdated = data;
        updateElement({
          element: newElement
        });
      }
    });

    return _this;
  }

  _createClass(LinkSettings, [{
    key: "render",
    value: function render() {
      var element = this.props.element;

      var _ref = get(element, "data.link") || {},
          href = _ref.href,
          newTab = _ref.newTab;

      return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(Tab, {
        label: "Link"
      }, /*#__PURE__*/React.createElement(Form, {
        data: {
          href: href,
          newTab: newTab
        },
        onChange: this.updateSettings
      }, function (_ref2) {
        var Bind = _ref2.Bind;
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
          span: 12
        }, /*#__PURE__*/React.createElement(Bind, {
          name: "href",
          validators: validation.create("url:allowRelative:allowHref")
        }, /*#__PURE__*/React.createElement(DelayedOnChange, null, function (props) {
          return /*#__PURE__*/React.createElement(Input, Object.assign({}, props, {
            label: "URL"
          }));
        })))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
          span: 6
        }, /*#__PURE__*/React.createElement(Typography, {
          use: "overline"
        }, "New tab")), /*#__PURE__*/React.createElement(Cell, {
          span: 6
        }, /*#__PURE__*/React.createElement(Bind, {
          name: "newTab"
        }, /*#__PURE__*/React.createElement(Switch, null)))));
      })));
    }
  }]);

  return LinkSettings;
}(React.Component);

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

export default connect(null, mapDispatchToProps)(withActiveElement()(LinkSettings));
//# sourceMappingURL=LinkSettings.js.map