import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Label from '../Label';
/**
 * Generates an <select> element
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */

var Select = function Select(_ref) {
  var children = _ref.children,
      displayError = _ref.displayError,
      id = _ref.id,
      isDisabled = _ref.isDisabled,
      isFullWidth = _ref.isFullWidth,
      isOptional = _ref.isOptional,
      isRequired = _ref.isRequired,
      label = _ref.label,
      onChange = _ref.onChange,
      name = _ref.name,
      note = _ref.note,
      testSection = _ref.testSection;
  var renderSelect = React.createElement("select", {
    "data-oui-component": true,
    "data-test-section": testSection,
    disabled: isDisabled,
    required: isRequired,
    name: name,
    id: id,
    className: classNames('oui-select', {
      'width--1-1': isFullWidth
    }),
    onChange: onChange
  }, isRequired && React.createElement("option", {
    value: ""
  }, "Please select an option"), children);

  if (label) {
    return React.createElement("div", {
      "data-oui-component": true,
      className: classNames({
        'oui-form-bad-news': displayError
      })
    }, React.createElement(Label, {
      isRequired: isRequired,
      isOptional: isOptional,
      inputId: id
    }, label), renderSelect, note && React.createElement("div", {
      className: "oui-form-note",
      "data-test-section": testSection && testSection + '-note'
    }, note));
  }

  return renderSelect;
};

Select.propTypes = {
  /** options elements */
  children: PropTypes.node,

  /** Whether or not this Select should be in an error state */
  displayError: PropTypes.bool,

  /** Select ID */
  id: PropTypes.string,

  /** Boolean for when Select is disabled */
  isDisabled: PropTypes.bool,

  /** Boolean to make Select take up 100% width of container */
  isFullWidth: PropTypes.bool,

  /** Boolean to indicate this Select is optional */
  isOptional: PropTypes.bool,

  /** Boolean to indicate this Select is required */
  isRequired: PropTypes.bool,

  /** The label for the Select */
  label: PropTypes.string,

  /** Select name */
  name: PropTypes.string,

  /** Message to show underneath the Select */
  note: PropTypes.string,

  /** Function that fires when value of the select changes */
  onChange: PropTypes.func,

  /** Hook for automated JavaScript tests */
  testSection: PropTypes.string
};
Select.displayName = 'Select';
export default Select;