import React, { useCallback } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

const Dropdown = ({ className, disabled, onChange, options, selectedOption, style, title }) => {
  const _onChange = useCallback(
    (event) => {
      event.preventDefault()
      event.stopPropagation()
      onChange(event.target.value)
    },
    [onChange],
  )

  return (
    <select
      className={classnames('dropdown', className)}
      disabled={disabled}
      title={title}
      onChange={_onChange}
      style={style}
      value={selectedOption}
    >
      {
        options.map((option) => {
          return (
            <option
              key={option.value}
              value={option.value}
            >
              { option.name || option.value }
            </option>
          )
        })
      }
    </select>
  )
}

Dropdown.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  title: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(
    PropTypes.exact({
      name: PropTypes.string,
      value: PropTypes.string.isRequired,
    }),
  ).isRequired,
  selectedOption: PropTypes.string,
  style: PropTypes.object,
}

Dropdown.defaultProps = {
  className: undefined,
  disabled: false,
  title: undefined,
  selectedOption: null,
  style: undefined,
}

export default Dropdown