import React from 'react';
import ReactResponsiveSelect from 'react-responsive-select';
import PropTypes from 'prop-types';
import classnames from 'classnames';

import ArrowDown from '../../../components/visuals/Icon/svg/ic_keyboard_arrow_down.svg';
import Icon from '../../visuals/Icon/Icon';
import InputLabel from '../Input/InputLabel';
import InputFeedback from '../Input/InputFeedback';

const CustomSelect = ({ label, note, valid, errorMessage, options, ...props }) => {
  const className = classnames('CustomSelect', {
    'CustomSelect--invalid': !valid,
  });
  return (
    <div className={className}>
      {label && <InputLabel>{label}</InputLabel>}
      <ReactResponsiveSelect options={options} {...props} />
      {!valid && <InputFeedback type="error">{errorMessage}</InputFeedback>}
      {note && <InputFeedback type="note">{note}</InputFeedback>}
    </div>
  );
};

CustomSelect.propTypes = {
  /**
   * A unique name to associate a select with it's selected option value/s
   * (also used on form submit)
   */
  name: PropTypes.string.isRequired,
  /**
   * Array of shape:
   */
  options: PropTypes.arrayOf(
    PropTypes.shape({
      /**
       * display value for the select and the default for the option label
       */
      text: PropTypes.string.isRequired,
      /**
       * value that is submitted
       */
      value: PropTypes.string.isRequired,
      /**
       * JSX markup used as the option label. Allows for the use of badges and icons...
       */
      markup: PropTypes.element,
      /**
       * Will display an option header when present. Use with a text property
       */
      optHeader: PropTypes.string,
      /**
       * disable option - option cannot be selected and is greyed
       */
      disabled: PropTypes.bool,
    })
  ).isRequired,
  /**
   * A function that submits your form
   */
  onSubmit: PropTypes.func,
  /**
   * Listen for changes on selected option change

   returns `{ altered: boolean, name: The name prop you gave ReactResponsiveSelect, value: option.value, text: option.text }`

   Note: altered signifies whether a select has been changed from its original value.
   */
  onChange: PropTypes.func,
  /**
   * Listen for blur when select loses focus

   returns `{ altered: boolean, name: The name prop you gave ReactResponsiveSelect, value: option.value, text: option.text }`

   Note: altered signifies whether a select has been changed from its original value.
   */
  onBlur: PropTypes.func,
  /**
   * Add a dropdown icon by using JSX markup
   */
  caretIcon: PropTypes.element,
  /**
   * Pre-select an option with this value - should match an existing `option.value`, or if omitted the first item will be selected
   */
  selectedValue: PropTypes.string,
  /**
   * Prefix for the select label
   */
  prefix: PropTypes.string,
  /**
   * Disables the select control
   */
  disabled: PropTypes.bool,
  /**
   * A custom label to be used when nothing is selected. When used, the first option is not automatically selected
   */
  noSelectionLabel: PropTypes.string,
  /**
   * Allows you to format your own custom select label.

   The customLabelRenderer function returns an array of option nodes. To use this feature, you need to construct and return some JSX using the below param

   `{ name: The name prop you gave ReactResponsiveSelect, value: option.value, text: option.text }`
   */
  customLabelRenderer: PropTypes.func,
  /**
   * Allows you to hook into changes in ReactResponsiveSelect
   *
   * The onListen function returns the following:
   *
   * | param      | type    | description                                                          |
   * |------------|---------|----------------------------------------------------------------------|
   * | isOpen     | Boolean | Whether the options panel is currently open or closed                |
   * | name       | String  | The name prop you passed into the ReactResponsiveSelect component    |
   * | actionType | String  | The internal action type that was fired within ReactResponsiveSelect |
   *
   * Handy for those situations where you need to change something potentially outside of your control, e.g. setting a class on <body/> when the options panel opens to inhibit body scrolling.
   *
   */
  onListen: PropTypes.func,
  /**
   * A message that gets displayed below dropdown describing the error
   */
  errorMessage: PropTypes.string,
  /**
   * Determines if the `errorMessage` should be displayed
   *
   * If `false` the error gets displayed
   */
  valid: PropTypes.bool,
  /**
   * Label for the dropdown input
   */
  label: PropTypes.string,
  /**
   * Note for the dropdown input
   */
  note: PropTypes.string,
};

CustomSelect.defaultProps = {
  onSubmit: PropTypes.noop,
  onChange: PropTypes.noop,
  onBlur: PropTypes.noop,
  caretIcon: <Icon icon={ArrowDown} key="caretIcon" className="rrs-caretIcon" />,
  selectedValue: '',
  prefix: '',
  disabled: false,
  noSelectionLabel: '',
  customLabelRenderer: PropTypes.noop,
  onListen: PropTypes.noop,
  errorMessage: '',
  valid: true,
  label: '',
  note: '',
};

export default CustomSelect;