import _get from "lodash/get";
import * as React from "react";
import { connect } from "react-redux";
import { Typography } from "@webiny/ui/Typography";
import { Grid, Cell } from "@webiny/ui/Grid";
import { Input as InputCmp } from "@webiny/ui/Input";
import { InputContainer } from "./StyledComponents";
import { getActiveElement } from "../../../selectors";

var Input = function Input(_ref) {
  var label = _ref.label,
      value = _ref.value,
      placeholder = _ref.placeholder,
      updateValue = _ref.updateValue,
      inputWidth = _ref.inputWidth;
  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
    span: 4
  }, /*#__PURE__*/React.createElement(Typography, {
    use: "overline"
  }, label)), /*#__PURE__*/React.createElement(Cell, {
    span: 8
  }, /*#__PURE__*/React.createElement(InputContainer, {
    width: inputWidth
  }, /*#__PURE__*/React.createElement(InputCmp, {
    placeholder: placeholder,
    value: value,
    onChange: updateValue
  }))));
};

export default connect(function (state, _ref2) {
  var value = _ref2.value,
      valueKey = _ref2.valueKey,
      defaultValue = _ref2.defaultValue;
  return {
    value: valueKey ? _get(getActiveElement(state), valueKey, defaultValue) : value
  };
})( /*#__PURE__*/React.memo(Input));
//# sourceMappingURL=Input.js.map