'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _Icons = require('../../Icons');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var SelectBoxInput = _styledComponents2.default.div.withConfig({
  displayName: 'template__SelectBoxInput'
})(['position:relative;display:block;width:100%;']);
var Display = _styledComponents2.default.button.attrs({ type: 'button' }).withConfig({
  displayName: 'template__Display'
})(['width:100%;height:40px;cursor:inherit;white-space:nowrap;user-select:none;cursor:pointer;padding:0;border:1px solid ', ';border-radius:0;background-color:', ';cursor:', ';border-left:', ';text-align:left;&:focus{outline:none;}'], function (props) {
  return props.errorState === 'initial' ? '#CCCCCC' : props.errorState === 'invalid' ? '#990000' : '#006600';
}, function (props) {
  return props.disabled ? props.theme['gray-1'] : props.theme['white'];
}, function (props) {
  return props.disabled ? 'not-allowed' : 'pointer';
}, function (props) {
  return props.borderLeft === 'none' ? '0px' : '';
});
var DefaultDisplay = _styledComponents2.default.div.withConfig({
  displayName: 'template__DefaultDisplay'
})(['width:100%;box-sizing:border-box;padding:5px 10px 5px 10px;font-family:\'Montserrat\',sans-serif;font-size:', ';font-weight:300;text-align:', ';overflow:hidden;text-overflow:ellipsis;color:', ';'], function (props) {
  return props.fontSize === 'small' ? '12px' : '14px';
}, function (props) {
  return props.textAlign === 'center' ? 'center' : 'left';
}, function (props) {
  return props.theme['gray-5'];
});
var Search = _styledComponents2.default.input.attrs({ type: 'text' }).withConfig({
  displayName: 'template__Search'
})(['width:100%;height:40px;font-family:\'Montserrat\',sans-serif;font-size:14px;font-weight:normal;box-shadow:none;color:', ';background-color:', ';border:1px solid ', ';box-sizing:border-box;padding:0.5rem 1rem;border-left:', ';&:focus{border-radius:none;border:1px solid ', ';outline:none;}'], function (props) {
  return props.theme['gray-3'];
}, function (props) {
  return props.theme['white'];
}, function (props) {
  return props.theme['gray-2'];
}, function (props) {
  return props.borderLeft === 'none' ? '0px' : '';
}, function (props) {
  return props.theme['gray-2'];
});
var Header = _styledComponents2.default.div.withConfig({
  displayName: 'template__Header'
})(['width:100%;']);
var DefaultHeader = _styledComponents2.default.div.withConfig({
  displayName: 'template__DefaultHeader'
})(['width:100%;padding:0.5rem 1rem;box-sizing:border-box;font-family:\'Montserrat\',sans-serif;font-size:14px;font-weight:500;color:', ';background-color:', ';cursor:not-allowed;&:hover{color:', ';}'], function (props) {
  return props.theme['gray-4'];
}, function (props) {
  return props.theme['gray-2'];
}, function (props) {
  return props.theme['gray-4'];
});
var List = _styledComponents2.default.div.withConfig({
  displayName: 'template__List'
})(['position:absolute;display:', ';flex-direction:column;justify-content:flex-start;align-items:flex-start;order:1;width:100%;height:auto;max-height:140px;overflow-x:hidden;background-color:', ';border:1px solid ', ';box-sizing:border-box;border-top:0px;z-index:10;border-left:', ';'], function (props) {
  return props.expanded ? 'flex' : 'none';
}, function (props) {
  return props.theme['white'];
}, function (props) {
  return props.theme['gray-2'];
}, function (props) {
  return props.borderLeft === 'none' ? 'none' : '';
});
var Item = _styledComponents2.default.div.withConfig({
  displayName: 'template__Item'
})(['width:100%;']);
var DefaultItem = _styledComponents2.default.div.withConfig({
  displayName: 'template__DefaultItem'
})(['width:100%;padding:0.5rem 1rem;box-sizing:border-box;font-family:\'Montserrat\',sans-serif;font-weight:300;font-size:', ';color:', ';cursor:pointer;&:hover{color:', ';background-color:', ';}'], function (props) {
  return props.fontSize === 'small' ? '12px' : '14px';
}, function (props) {
  return props.theme['gray-4'];
}, function (props) {
  return props.theme['gray-4'];
}, function (props) {
  return props.theme['gray-1'];
});
var Arrow = (0, _styledComponents2.default)(_Icons.Icon).withConfig({
  displayName: 'template__Arrow'
})(['position:absolute;top:15px;right:8px !important;font-size:', ';@media (min-width:320px){right:15px;}'], function (props) {
  return props.size || '10px';
});

var SelectInput = function SelectInput(props) {
  var items = props.items,
      selected = props.selected,
      disabled = props.disabled,
      defaultDisplay = props.defaultDisplay,
      expanded = props.expanded,
      searchEnabled = props.searchEnabled,
      handleBlur = props.handleBlur,
      handleChange = props.handleChange,
      handleClick = props.handleClick,
      handleFocus = props.handleFocus,
      hideArrow = props.hideArrow,
      templateDisplay = props.templateDisplay,
      templateHeader = props.templateHeader,
      templateItem = props.templateItem,
      errorState = props.errorState,
      fontSize = props.fontSize;

  var display = selected || { text: defaultDisplay, value: undefined };
  var showArrow = !hideArrow;

  return _react2.default.createElement(
    SelectBoxInput,
    null,
    !expanded || !searchEnabled ? _react2.default.createElement(
      Display,
      { onClick: handleFocus, onBlur: handleBlur, disabled: disabled, errorState: errorState, borderLeft: props.borderLeft },
      templateDisplay ? templateDisplay(display) : _react2.default.createElement(
        DefaultDisplay,
        { textAlign: props.textAlign, fontSize: fontSize },
        display.text
      )
    ) : _react2.default.createElement(Search, { borderLeft: props.borderLeft, autoFocus: expanded, onChange: handleChange }),
    showArrow && _react2.default.createElement(Arrow, { name: 'down-arrow', size: props.arrowSize }),
    _react2.default.createElement(
      List,
      { expanded: expanded },
      items.map(function (item, index) {
        return item.value == null ? _react2.default.createElement(
          Header,
          { key: index },
          templateHeader ? templateHeader(item) : _react2.default.createElement(
            DefaultHeader,
            null,
            item.text
          )
        ) : _react2.default.createElement(
          Item,
          { key: index, onMouseDown: function onMouseDown() {
              return handleClick(item);
            } },
          templateItem ? templateItem(item) : _react2.default.createElement(
            DefaultItem,
            { fontSize: fontSize },
            item.text
          )
        );
      })
    )
  );
};

SelectInput.propTypes = {
  items: _propTypes2.default.array.isRequired,
  selected: _propTypes2.default.object,
  expanded: _propTypes2.default.bool,
  searchEnabled: _propTypes2.default.bool,
  opened: _propTypes2.default.bool,
  disabled: _propTypes2.default.bool,
  handleBlur: _propTypes2.default.func,
  handleChange: _propTypes2.default.func,
  handleClick: _propTypes2.default.func,
  handleFocus: _propTypes2.default.func,
  templateHeader: _propTypes2.default.func,
  templateItem: _propTypes2.default.func,
  fontSize: _propTypes2.default.string
};

exports.default = SelectInput;