"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Description = exports.SuccessMessage = exports.ErrorMessage = exports.FormBox = exports.floatingLabelInputStyles = exports.FloatingLabel = exports.FormRow = exports.FLOAT_LABEL_ANIM_FUNC = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _primitives = require("../../../primitives");

var _forms = require("./forms.css-rules");

var _branding = require("../../../mixins/branding");

var _typography = require("../../../mixins/typography");

var _text = require("../../typography/text");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var FLOAT_LABEL_ANIM_FUNC = "0.3s cubic-bezier(0.65, 0, 0.35, 1)";
exports.FLOAT_LABEL_ANIM_FUNC = FLOAT_LABEL_ANIM_FUNC;

var getFloatLabelTranslateAmount = function getFloatLabelTranslateAmount(_ref) {
  var theme = _ref.theme,
      labelStyle = _ref.labelStyle;
  return labelStyle === 'floating' ? theme.spacing.s1 : 0;
};

var getFormBoxBackgroundColor = function getFormBoxBackgroundColor(props) {
  return (0, _branding.getPaletteColor)(props.disabled || props.readOnly ? 'background' : 'white')(props);
};

var getFloatTransform = function getFloatTransform(_ref2) {
  var theme = _ref2.theme,
      fontSize = _ref2.fontSize;
  var factor = parseInt(theme.typescale.f0, 10) / parseInt((0, _typography.getFontSize)({
    theme: theme,
    fontSize: fontSize
  }), 10);
  return "scale3D(".concat(factor, ", ").concat(factor, ", 1)");
};

var FormRow = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "FormRow",
  componentId: "sc-1jsdj1v-0"
})(["&&{min-height:44px;:last-child{border-bottom:0;}&:not(:last-child){border-bottom:1px solid ", ";}}&:first-child{border-top-left-radius:", ";border-top-right-radius:", ";}&:last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}"], (0, _branding.getPaletteColor)('greyscale-light'), _forms.getCardBorderRadius, _forms.getCardBorderRadius, _forms.getCardBorderRadius, _forms.getCardBorderRadius);
/* Floating label implementation:
 * You must add floatingLabelInputStyles to the input who's focus we are
 * watching.  Then, put both the `<FloatingLabel>` and the `<input>` as siblings
 * inside a `<FormBox>` for the magic to happen.
 */

exports.FormRow = FormRow;

var FloatingLabel = _styledComponents["default"].label.withConfig({
  displayName: "FloatingLabel",
  componentId: "sc-1jsdj1v-1"
})(["color:", ";left:", ";pointer-events:none;position:absolute;margin-top:-2px;transition:transform ", ",top ", ";transform-origin:top left;font-size:", ";text-align:left;font-weight:", ";top:", ";right:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"], function (_ref3) {
  var isEmbeddable = _ref3.isEmbeddable,
      theme = _ref3.theme;
  return isEmbeddable ? undefined : (0, _branding.getPaletteColor)('greyscale-dark')({
    theme: theme
  });
}, function (_ref4) {
  var hasLeftIcon = _ref4.hasLeftIcon,
      theme = _ref4.theme,
      isEmbeddable = _ref4.isEmbeddable;
  return hasLeftIcon || isEmbeddable ? '0' : theme.spacing.s2;
}, FLOAT_LABEL_ANIM_FUNC, FLOAT_LABEL_ANIM_FUNC, _typography.getFontSize, function (_ref5) {
  var isEmbeddable = _ref5.isEmbeddable;
  return isEmbeddable ? 'normal' : 'bold';
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.spacing.s2;
});
/**
 * Include this CSS snippet in the input associated with a floating label.
 * This is what un-hides the placeholder and pushes the input down inside
 * the form box to make room for the floated label.
 */


exports.FloatingLabel = FloatingLabel;
var floatingLabelInputStyles = (0, _styledComponents.css)(["transition:transform ", ",opacity ", ";opacity:", ";&:focus,&[data-has-value='true']{opacity:1;transform:translate3d(0,", ",0);}"], FLOAT_LABEL_ANIM_FUNC, FLOAT_LABEL_ANIM_FUNC, function (_ref7) {
  var labelStyle = _ref7.labelStyle;
  return labelStyle === 'floating' ? '0' : '1';
}, getFloatLabelTranslateAmount);
exports.floatingLabelInputStyles = floatingLabelInputStyles;
var FormBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "FormBox",
  componentId: "sc-1jsdj1v-2"
})(["font-size:", ";border:1px solid ", ";border-radius:", ";cursor:text;position:relative;transition:border-color ", ";background-color:", ";&:focus-within{border:1px solid ", ";}&:focus-within ", ",", "[data-has-value='true']{color:", ";top:", ";transform:", ";}&:hover:not(:focus-within):not([disabled]){border:1px solid ", ";}"], _typography.getFontSize, (0, _branding.getPaletteColor)('greyscale-light'), _forms.getCardBorderRadius, FLOAT_LABEL_ANIM_FUNC, getFormBoxBackgroundColor, (0, _branding.getPaletteColor)('greyscale-black'), FloatingLabel, FloatingLabel, (0, _branding.getPaletteColor)('greyscale-dark'), getFloatLabelTranslateAmount, getFloatTransform, (0, _branding.getPaletteColor)('greyscale-medium'));
exports.FormBox = FormBox;
var MessageBox = (0, _styledComponents["default"])(_primitives.Box).withConfig({
  displayName: "MessageBox",
  componentId: "sc-1jsdj1v-3"
})(["margin-top:5px;"]);

var ErrorMessage = function ErrorMessage(_ref8) {
  var message = _ref8.message;
  return /*#__PURE__*/_react["default"].createElement(MessageBox, null, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    spacing: "mb0",
    fontSize: "f1",
    colorName: "error-fg"
  }, Array.isArray(message) ? message.join(', ') : message));
};

exports.ErrorMessage = ErrorMessage;

var SuccessMessage = function SuccessMessage(_ref9) {
  var message = _ref9.message;
  return /*#__PURE__*/_react["default"].createElement(MessageBox, {
    stacked: "row",
    align: "center"
  }, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    spacing: ['mb0', 'mr1'],
    fontSize: "f1",
    colorName: "success-fg"
  }, message), /*#__PURE__*/_react["default"].createElement(MiniCheckmark, null));
};

exports.SuccessMessage = SuccessMessage;

var Description = function Description(_ref10) {
  var message = _ref10.message;
  return /*#__PURE__*/_react["default"].createElement(MessageBox, null, /*#__PURE__*/_react["default"].createElement(_text.Text, {
    spacing: "mb0",
    fontSize: "f1",
    colorName: "greyscale-dark"
  }, message));
};

exports.Description = Description;

var MiniCheckmark = function MiniCheckmark() {
  var theme = (0, _styledComponents.useTheme)();
  return /*#__PURE__*/_react["default"].createElement("svg", {
    width: "10",
    height: "8",
    viewBox: "0 0 10 8",
    fill: "none"
  }, /*#__PURE__*/_react["default"].createElement("path", {
    d: "M1 4.23077L3.66667 7L9 1",
    stroke: theme.colorPalette['success-fg'],
    strokeWidth: "2",
    strokeMiterlimit: "10",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }));
};