"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.TextInput = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

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

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

var _ = require("..");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var TextInput = function TextInput(_ref) {
  var label = _ref.label,
      _ref$isRequired = _ref.isRequired,
      isRequired = _ref$isRequired === void 0 ? false : _ref$isRequired,
      id = _ref.id,
      errors = _ref.errors,
      name = _ref.name,
      _ref$inputSize = _ref.inputSize,
      inputSize = _ref$inputSize === void 0 ? 'big' : _ref$inputSize,
      isErrorAbsolute = _ref.isErrorAbsolute,
      inputRef = _ref.inputRef,
      errorRef = _ref.errorRef,
      hasValue = _ref.hasValue,
      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["label", "isRequired", "id", "errors", "name", "inputSize", "isErrorAbsolute", "inputRef", "errorRef", "hasValue"]);
  return /*#__PURE__*/_react["default"].createElement(Container, {
    size: inputSize
  }, /*#__PURE__*/_react["default"].createElement(Wrapper, {
    size: inputSize
  }, /*#__PURE__*/_react["default"].createElement(Input, (0, _extends2["default"])({
    hasValue: hasValue,
    name: name,
    size: inputSize,
    id: id,
    required: true,
    ref: inputRef
  }, rest)), /*#__PURE__*/_react["default"].createElement(Label, {
    size: inputSize,
    htmlFor: id
  }, label, " ", isRequired && '*')), errors && name && /*#__PURE__*/_react["default"].createElement(_.FormError, {
    absolute: isErrorAbsolute,
    errors: errors,
    fieldName: name,
    errorRef: errorRef
  }));
};

exports.TextInput = TextInput;
var stylesMap = {
  big: {
    inputHeight: '5.6rem',
    labelTop: '1.5rem',
    translateY: '-3.7rem',
    containerMinHeight: '8.4rem',
    wrapperTop: '0.8rem'
  },
  normal: {
    inputHeight: '5rem',
    labelTop: '1.2rem',
    translateY: '-3.3rem',
    containerMinHeight: 'none',
    wrapperTop: '0'
  }
};

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  overflow: visible;\n  position: relative;\n  min-height: ", ";\n"])), function (props) {
  return stylesMap[props.size].containerMinHeight;
});

var Wrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: ", ";\n  top: ", ";\n  border-radius: 0.4rem;\n"])), function (props) {
  return stylesMap[props.size].inputHeight;
}, function (props) {
  return stylesMap[props.size].wrapperTop;
});

var Input = _styledComponents["default"].input.attrs({
  className: 'p-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  color: ", ";\n  height: ", ";\n  border-style: solid;\n  border-width: 0.1rem;\n  border-radius: 0.4rem;\n  outline: 0px;\n\n  border-color: ", ";\n\n  &::placeholder {\n    color: #ccc;\n  }\n\n  &:hover {\n    border-color: ", ";\n  }\n\n  &:focus {\n    border-color: ", ";\n  }\n\n  &:valid + label,\n  &:focus + label {\n    color: ", ";\n    transform: scale(0.75)\n      translateY(", ");\n  }\n  &:disabled + label {\n    ", "\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (props) {
  return stylesMap[props.size].inputHeight;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.light;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
}, function (props) {
  return stylesMap[props.size].translateY;
}, function (props) {
  return props.hasValue && "\n    color: " + props.theme.palette.primary + ";\n    transform: scale(0.75)\n      translateY(" + stylesMap[props.size].translateY + ");\n    ";
});

var Label = _styledComponents["default"].label.attrs({
  className: 'py-0 px-1'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  left: 1rem;\n  top: ", ";\n  user-select: none;\n  transform: scale(1);\n  transform-origin: left center;\n  will-change: transform;\n  transition-property: transform;\n  transition-duration: 250ms;\n  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);\n  color: ", ";\n  pointer-events: none;\n  background: ", ";\n"])), function (props) {
  return stylesMap[props.size].labelTop;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.hint;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map