import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { FormError } from '..';
export var TextInput = (_ref) => {
  var {
    label,
    isRequired = false,
    id,
    errors,
    name,
    inputSize = 'big',
    isErrorAbsolute,
    inputRef,
    errorRef,
    hasValue
  } = _ref,
      rest = _objectWithoutPropertiesLoose(_ref, ["label", "isRequired", "id", "errors", "name", "inputSize", "isErrorAbsolute", "inputRef", "errorRef", "hasValue"]);

  return /*#__PURE__*/React.createElement(Container, {
    size: inputSize
  }, /*#__PURE__*/React.createElement(Wrapper, {
    size: inputSize
  }, /*#__PURE__*/React.createElement(Input, _extends({
    hasValue: hasValue,
    name: name,
    size: inputSize,
    id: id,
    required: true,
    ref: inputRef
  }, rest)), /*#__PURE__*/React.createElement(Label, {
    size: inputSize,
    htmlFor: id
  }, label, " ", isRequired && '*')), errors && name && /*#__PURE__*/React.createElement(FormError, {
    absolute: isErrorAbsolute,
    errors: errors,
    fieldName: name,
    errorRef: errorRef
  }));
};
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 = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: visible;\n  position: relative;\n  min-height: ", ";\n"])), props => stylesMap[props.size].containerMinHeight);
var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), props => stylesMap[props.size].inputHeight, props => stylesMap[props.size].wrapperTop);
var Input = styled.input.attrs({
  className: 'p-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, props => stylesMap[props.size].inputHeight, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.light;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
}, props => stylesMap[props.size].translateY, props => props.hasValue && "\n    color: " + props.theme.palette.primary + ";\n    transform: scale(0.75)\n      translateY(" + stylesMap[props.size].translateY + ");\n    ");
var Label = styled.label.attrs({
  className: 'py-0 px-1'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => stylesMap[props.size].labelTop, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.hint;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map