import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { b as classNames, a as withNano } from '../chunk-566df01b.js';
import Text from '../Text/index.js';
import { a as classCallCheck, b as createClass, c as defineProperty, d as inherits, e as objectWithoutProperties, f as possibleConstructorReturn, g as slicedToArray, h as _typeof, i as _extends } from '../chunk-aad905a2.js';
import '../chunk-aeb80e51.js';

var styles = (function (theme) {
  var typography = theme.typography,
      palette = theme.palette,
      transitions = theme.transitions,
      spacing = theme.spacing;

  return {
    input: {
      width: 'calc(100% - 18px)',
      borderRadius: 4,
      border: 'solid 1px ' + palette.grey90,
      height: 20,
      padding: spacing(2),
      outline: 'none',
      transition: transitions.duration.short + 'ms ' + transitions.easing.easeOut,
      fontSize: typography.fontSizeMd,
      fontWeight: typography.fontWeight,
      fontStyle: typography.fontStyle,
      fontStretch: typography.fontStretch,
      lineHeight: typography.lineHeightMd,
      letterSpacing: 'normal',
      color: palette.black,
      boxSizing: 'content-box',
      '&::placeholder': {
        color: palette.grey70
      }
    },
    'input:disabled': {
      background: '#eaeaea',
      cursor: 'no-drop',
      border: 'none'
    },
    focused: {
      border: 'solid 1px ' + palette.blue
    },
    error: {
      backgroundColor: 'rgba(208, 2, 27, 0.08)',
      border: 'solid 1px ' + palette.red
    },
    complete: {
      border: 'solid 1px ' + palette.black
    },
    container: {
      margin: spacing(1) + ' 0'
    },
    errorText: {},
    label: {
      lineHeight: typography.lineHeightLg,
      letterSpacing: 'normal'
    },
    labelText: {
      display: 'inline-block'
    },
    customSize: {
      width: function width(_ref) {
        var size = _ref.size;

        if (typeof size === 'string') {
          if (size === 'sm') return 'calc(25% - 18px)';
          if (size === 'md') return 'calc(50% - 18px)';
          if (size === 'lg') return 'calc(80% - 18px)';
          if (size === 'xl') return 'calc(100% - 18px)';
        }
      }
    },
    inputMultiline: {
      width: '100%',
      height: 'auto',
      maxWidth: '100%'
    },
    requiredLabelHint: {
      verticalAlign: 'baseline',
      color: 'red'
    },
    optionalLabelHint: {
      display: 'inline',
      marginLeft: '4px'
    }
  };
});

var Input = function (_Component) {
	inherits(Input, _Component);

	function Input(props) {
		classCallCheck(this, Input);

		var _this = possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).call(this, props));

		_this.onChange = function (e) {
			var handleChange = _this.props.handleChange;
			var changed = _this.state.changed;

			if (handleChange) handleChange(e);
			if (!changed) _this.setState({ changed: true });
		};

		_this.onBlur = function (e) {
			var handleBlur = _this.props.handleBlur;

			_this.setState(function (prevState) {
				return { focused: !prevState.focused };
			});
			if (handleBlur) return handleBlur(e);
		};

		_this.onFocus = function (e) {
			var touched = _this.state.touched;
			var handleFocus = _this.props.handleFocus;

			_this.setState(function (prevState) {
				return { focused: !prevState.focused };
			});
			if (!touched) _this.setState({ touched: true });
			if (handleFocus) return handleFocus(e);
		};

		_this.state = {
			focused: false,
			touched: false,
			changed: false
		};
		return _this;
	}

	createClass(Input, [{
		key: 'render',
		value: function render() {
			var _props = this.props,
			    label = _props.label,
			    placeholder = _props.placeholder,
			    value = _props.value,
			    complete = _props.complete,
			    errorLabels = _props.errorLabels,
			    isValid = _props.isValid,
			    type = _props.type,
			    classes = _props.classes,
			    size = _props.size,
			    helpLabels = _props.helpLabels,
			    handleBlur = _props.handleBlur,
			    handleChange = _props.handleChange,
			    handleFocus = _props.handleFocus,
			    multiline = _props.multiline,
			    className = _props.className,
			    disabled = _props.disabled,
			    required = _props.required,
			    optional = _props.optional,
			    rest = objectWithoutProperties(_props, ['label', 'placeholder', 'value', 'complete', 'errorLabels', 'isValid', 'type', 'classes', 'size', 'helpLabels', 'handleBlur', 'handleChange', 'handleFocus', 'multiline', 'className', 'disabled', 'required', 'optional']);
			var _state = this.state,
			    focused = _state.focused,
			    touched = _state.touched,
			    changed = _state.changed;

			var C = multiline ? 'textarea' : 'input';
			var showErrorMessage = errorLabels && changed && touched && !focused && !isValid;

			if (required && optional) throw new Error('Cannot use required and optional at the same time');

			return React.createElement(
				'div',
				{ className: classes.container },
				label && React.createElement(
					'div',
					{ className: classes.label },
					React.createElement(
						Text,
						{ className: classes.labelText },
						label
					),
					required && React.createElement(
						'span',
						{ className: classes.requiredLabelHint },
						'*'
					),
					optional && React.createElement(
						Text,
						{ color: 'grey', className: classes.optionalLabelHint },
						'(optional)'
					)
				),
				React.createElement(C, _extends({
					className: classNames(classes.input, changed && touched && !focused && !isValid && classes.error, !focused && isValid && classes.complete, focused && classes.focused, size && classes.customSize, multiline && classes.inputMultiline, className && className),
					placeholder: placeholder,
					value: value,
					onChange: this.onChange,
					onBlur: this.onBlur,
					onFocus: this.onFocus,
					type: type,
					disabled: disabled
				}, rest)),
				React.createElement(
					'div',
					null,
					showErrorMessage ? errorLabels.map(function (error, index, arr) {
						return React.createElement(
							Text,
							{ key: error, className: classes.errorText, color: 'red', inline: true },
							error,
							index !== arr.length - 1 ? '. ' : ''
						);
					}) : (helpLabels || [React.createElement(
						'span',
						null,
						'\xA0'
					)]).map(function (msg, index, arr) {
						return React.createElement(
							Text,
							{ key: msg, className: classes.errorText, color: 'grey', inline: true },
							msg,
							index !== arr.length - 1 ? '. ' : ''
						);
					})
				)
			);
		}
	}]);
	return Input;
}(Component);

Input.displayName = 'Input';

Input.defaultProps = {
	placeholder: 'Placeholder',
	type: 'text',
	complete: false,
	size: 'xl',
	multiline: false
};

Input.propTypes = {
	label: PropTypes.string,
	placeholder: PropTypes.string,
	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
	handleBlur: PropTypes.func,
	handleChange: PropTypes.func.isRequired,
	handleFocus: PropTypes.func,
	errorLabels: PropTypes.arrayOf(PropTypes.string),
	isValid: PropTypes.bool.isRequired,
	type: PropTypes.string,
	classes: PropTypes.object,
	complete: PropTypes.bool,
	size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl']),
	helpLabels: PropTypes.arrayOf(PropTypes.string),
	multiline: PropTypes.bool,
	className: PropTypes.string,
	disabled: PropTypes.bool,
	required: PropTypes.bool,
	optional: PropTypes.bool
};

var Input$1 = withNano(styles, {
	observableProps: ['size']
})(Input);

export default Input$1;
//# sourceMappingURL=index.js.map
