import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { b as classNames, a as withNano } from '../chunk-566df01b.js';
import Arrow from '../Icons/Arrow/index.js';
import Text from '../Text/index.js';
import Options from './Options/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';
import '../Icons/Icon/index.js';
import './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) {
	inherits(Select, _Component);

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

		var _this = 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 = 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.createElement(
				'div',
				_extends({
					className: classNames(classes.container, className),
					ref: function ref(node) {
						return _this.node = node;
					}
				}, rest),
				label && React.createElement(
					Text,
					{ className: classes.label },
					label
				),
				React.createElement(
					'div',
					{ className: classes.input, onClick: function onClick() {
							return _this.onClick();
						} },
					selectedIndex >= 0 && React.createElement(
						Text,
						{ size: '14px', bold: true },
						options[selectedIndex].label
					),
					selectedIndex < 0 && React.createElement(
						Text,
						{ size: '14px', color: 'grey' },
						placeholder
					),
					React.createElement(Arrow, { className: classNames(classes.arrow, isOpen && classes.open) })
				),
				errorLabels && touched && !isValid && errorLabels.map(function (error) {
					return React.createElement(
						Text,
						{ key: error, className: classes.errorText, color: 'red' },
						error
					);
				}),
				isOpen ? React.createElement(Options, { options: options, onChange: _this.onChange }) : null
			);
		};

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

	return Select;
}(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 = withNano(styles)(Select);

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