'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var __chunk_1 = require('../chunk-f817ce38.js');
var index$1 = require('../Icons/Arrow/index.js');
var index$1$1 = require('../Text/index.js');
var index = require('./Options/index.js');
var __chunk_3 = require('../chunk-6d243953.js');
require('../chunk-2b268ae7.js');
require('../Icons/Icon/index.js');
require('./Options/Item/index.js');

var styles = (function (theme) {
  return {
    container: {
      position: 'relative'
    },
    input: {
      position: 'relative',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
      borderRadius: '4px',
      border: 'solid 1px',
      borderColor: theme.palette.grey90,
      padding: '8px 16px',
      '&:active': {
        boxShadow: '0 0 2px 0 rgba(32, 119, 213, 0.16)',
        borderColor: theme.palette.blue,
        backgroundColor: theme.palette.veryLightBlue
      }
    },
    arrow: {
      transform: 'rotate(90deg)',
      transition: 'transform 0.3s ease-in-out'
    },
    open: {
      transform: 'rotate(270deg)'
    }
  };
});

/* eslint-disable jsx-a11y/no-static-element-interactions */

var Select = function (_Component) {
	__chunk_3.inherits(Select, _Component);

	function Select(props) {
		__chunk_3.classCallCheck(this, Select);

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

		_this.componentDidMount = function () {
			window.addEventListener('mousedown', _this.handleClickOutsideFilter, false);
		};

		_this.componentWillUnmount = function () {
			window.removeEventListener('mousedown', _this.handleClickOutsideFilter, false);
		};

		_this.handleClickOutsideFilter = function (e) {
			if (_this.node && !_this.node.contains(e.target)) {
				_this.setState({ isOpen: false });
			}
		};

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


			_this.setState({ isOpen: false });

			if (onChange) onChange(value);
			if (!changed) _this.setState({ changed: true });
		};

		_this.onClick = function () {
			var isOpen = _this.state.isOpen;

			_this.setState({ isOpen: !isOpen, touched: true });
		};

		_this.render = function () {
			var _this$props = _this.props,
			    options = _this$props.options,
			    label = _this$props.label,
			    errorLabels = _this$props.errorLabels,
			    selected = _this$props.selected,
			    classes = _this$props.classes,
			    className = _this$props.className,
			    placeholder = _this$props.placeholder,
			    isValid = _this$props.isValid,
			    rest = __chunk_3.objectWithoutProperties(_this$props, ['options', 'label', 'errorLabels', 'selected', 'classes', 'className', 'placeholder', 'isValid']);
			var _this$state = _this.state,
			    touched = _this$state.touched,
			    isOpen = _this$state.isOpen;

			var selectedIndex = options.findIndex(function (option) {
				return option.value === selected;
			});

			return React__default.createElement(
				'div',
				__chunk_3._extends({
					className: __chunk_1.classNames(classes.container, className),
					ref: function ref(node) {
						return _this.node = node;
					}
				}, rest),
				label && React__default.createElement(
					index$1$1,
					{ className: classes.label },
					label
				),
				React__default.createElement(
					'div',
					{ className: classes.input, onClick: function onClick() {
							return _this.onClick();
						} },
					selectedIndex >= 0 && React__default.createElement(
						index$1$1,
						{ size: '14px', bold: true },
						options[selectedIndex].label
					),
					selectedIndex < 0 && React__default.createElement(
						index$1$1,
						{ size: '14px', color: 'grey' },
						placeholder
					),
					React__default.createElement(index$1, { className: __chunk_1.classNames(classes.arrow, isOpen && classes.open) })
				),
				errorLabels && touched && !isValid && errorLabels.map(function (error) {
					return React__default.createElement(
						index$1$1,
						{ key: error, className: classes.errorText, color: 'red' },
						error
					);
				}),
				isOpen ? React__default.createElement(index, { options: options, onChange: _this.onChange }) : null
			);
		};

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

	return Select;
}(React.Component);

Select.propTypes = {
	className: PropTypes.object,
	classes: PropTypes.object,
	errorLabels: PropTypes.arrayOf(PropTypes.string),
	isValid: PropTypes.bool,
	label: PropTypes.string,
	onChange: PropTypes.func.isRequired,
	options: PropTypes.arrayOf(PropTypes.shape({
		value: PropTypes.string,
		label: PropTypes.string
	})),
	placeholder: PropTypes.string,
	selected: PropTypes.string
};

var Select$1 = __chunk_1.withNano(styles)(Select);

module.exports = Select$1;
//# sourceMappingURL=index.js.map
