function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { Icon } from '../';
import v from '../../config/variables';
const DropdownContainer = styled.div`
  cursor: ${props => props.disabled ? v.dropdown.disabled.cursor : v.dropdown.cursor}
  display: inline-block;
  background-color: ${v.theme.white};
  border: 1px solid ${v.base.borderColor};
  border-radius: ${v.base.radiusSmall}px;
  width: 200px;
`;
const DropdownTitle = styled.div`
  color: ${v.theme.primary};
  text-align: right;
  font-size: 14px;
  font-weight: 600;
  padding: ${v.base.gutter * 0.75}px ${v.base.gutter}px;
  border-bottom: 1px solid ${v.base.borderColor};
`;
DropdownTitle.displayName = 'DropdownTitle';
export const IconContainer = styled.span`
  margin-left: ${v.base.gutter / 3}px;
`;
const DropdownInner = styled.div``;
DropdownInner.displayName = 'DropdownInner';

class Dropdown extends React.PureComponent {
  constructor(props) {
    super(props);

    _defineProperty(this, "handleToggle", () => {
      this.setState(prevState => ({
        open: !prevState.open
      }), this._triggerEvents);
    });

    _defineProperty(this, "_triggerEvents", () => {
      const {
        onToggle,
        onOpen,
        onClose
      } = this.props;
      onToggle && onToggle();
      this.state.open && onOpen && onOpen();
      !this.state.open && onClose && onClose();
    });

    this.state = {
      open: props.open
    };
  }

  get caretIcon() {
    return this.state.open ? 'angle-up' : 'angle-down';
  }
  /**
   * @description toggle the state of the dropdown
   * @returns { Void }
   */


  render() {
    return React.createElement(DropdownContainer, {
      disabled: this.props.disabled
    }, React.createElement(DropdownTitle, {
      onClick: !this.props.disabled ? this.handleToggle : undefined
    }, this.props.title, React.createElement(IconContainer, null, React.createElement(Icon, {
      name: this.caretIcon
    }))), this.state.open && React.createElement(DropdownInner, null, this.props.children));
  }

}

_defineProperty(Dropdown, "propTypes", {
  title: PropTypes.string.isRequired,
  children: PropTypes.node,
  disabled: PropTypes.bool,
  open: PropTypes.bool,
  onToggle: PropTypes.func,
  onOpen: PropTypes.func,
  onClose: PropTypes.func
});

_defineProperty(Dropdown, "defaultProps", {
  children: null,
  disabled: false,
  open: false,
  onToggle: null,
  onOpen: null,
  onClose: null
});

export default Dropdown;