'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _Colors = require('../../Colors');

var _ramda = require('ramda');

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

var Wrapper = _styledComponents2.default.div.withConfig({
  displayName: 'template__Wrapper'
})(['display:inline-flex;text-transform:', ';position:relative;'], function (props) {
  return props.uppercase ? 'uppercase' : 'none';
});
var ButtonContainer = _styledComponents2.default.div.withConfig({
  displayName: 'template__ButtonContainer'
})(['display:inline-flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;width:inherit;& > *{color:', '!important;}'], function (props) {
  return props.theme[props.color];
});
var Button = _styledComponents2.default.div.withConfig({
  displayName: 'template__Button'
})(['display:inline;font-family:\'Montserrat\',Helvetica,sans-serif;']);
var DropdownIcon = (0, _styledComponents2.default)(_Icons.Icon).withConfig({
  displayName: 'template__DropdownIcon'
})(['padding-left:2px;']);
var DropdownList = _styledComponents2.default.ul.withConfig({
  displayName: 'template__DropdownList'
})(['background-clip:padding-box;background-color:', ';;border:1px solid ', ';border-radius:4px;bottom:0px;#box-sizing:border-box;box-shadow:0 6px 12px rgba(0,0,0,0.175);display:', ';float:none;height:auto;width:inherit;line-height:20px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:2px 0px;max-height:400px;min-width:20px;overflow:auto;padding:5px 0px;position:absolute;right:0;', ' z-index:10;'], function (props) {
  return props.theme['white'];
}, function (props) {
  return props.theme['gray-1'];
}, function (props) {
  return props.toggled ? 'block' : 'none';
}, function (props) {
  return props.down ? 'top: 25px; bottom: auto;' : 'top: auto; bottom: 25px;';
});

var DropdownItem = _styledComponents2.default.li.withConfig({
  displayName: 'template__DropdownItem'
})(['color:', ';cursor:pointer;padding:3px 20px;font-family:\'Montserrat\',Helvetica,sans-serif;font-size:14px;font-weight:300;text-align:left;text-size-adjust:100%;white-space:nowrap;'], function (props) {
  return props.theme['gray-5'];
});

var Dropdown = function Dropdown(props) {
  var color = props.color,
      down = props.down,
      uppercase = props.uppercase,
      toggled = props.toggled,
      selectedItem = props.selectedItem,
      items = props.items,
      handleClick = props.handleClick,
      handleCallback = props.handleCallback;


  return _react2.default.createElement(
    Wrapper,
    { uppercase: uppercase },
    _react2.default.createElement(
      DropdownList,
      { toggled: toggled, down: down },
      items.map(function (item, index) {
        return _react2.default.createElement(
          DropdownItem,
          { key: index, onClick: handleCallback.bind(null, item) },
          item.text
        );
      })
    ),
    _react2.default.createElement(
      ButtonContainer,
      { color: color, onClick: handleClick },
      _react2.default.createElement(
        Button,
        null,
        selectedItem.text
      ),
      _react2.default.createElement(DropdownIcon, { name: 'down-arrow', size: '8px' })
    )
  );
};

Dropdown.defaultProps = {
  color: 'brand-secondary',
  toggled: false,
  selectedValue: 0,
  uppercase: true,
  down: false
};

Dropdown.propTypes = {
  selectedValue: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
  items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    text: _propTypes2.default.string.isRequired,
    value: _propTypes2.default.string.isRequired
  })),
  callback: _propTypes2.default.func.isRequired,
  toggled: _propTypes2.default.bool,
  color: _propTypes2.default.oneOf((0, _ramda.keysIn)((0, _Colors.Palette)())),
  uppercase: _propTypes2.default.bool,
  down: _propTypes2.default.bool
};

exports.default = Dropdown;