import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';

import { KD_COUNTRY } from '../../constants';
import { typeOptions } from './optionsValue';

function TypeSelector({ selected, onChange, tiny, theme }) {
  return (
    <select
      className={classNames({ 'c-select-tiny': tiny }, { [theme['c-select-tiny']]: tiny })}
      onChange={(event) => { onChange(event.target.value); }}
      value={selected}
    >
      {
        typeOptions.map(option => (
          <option value={option.value} key={option.value}>{option.label}</option>
        ))
      }
    </select>
  );
}

TypeSelector.propTypes = {
  theme: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.func,
  ]).isRequired,
  selected: PropTypes.string,
  onChange: PropTypes.func,
  tiny: PropTypes.bool,
};
TypeSelector.defaultProps = {
  selected: KD_COUNTRY,
  tiny: true,
};

export default TypeSelector;
