import React from 'react';
import { default as ReactSelect } from 'react-select';
import PropTypes from 'prop-types';
import Typography from '../Typography';
import './select.scss';

const { Text } = Typography;

const Select = ({
  options,
  open,
  defaultValue,
  onChange,
  multiple,
  clearable,
  label,
}) => (
  <div>
    {label && <Text bold>{label}</Text>}

    <ReactSelect
      isClearable={clearable}
      isMulti={multiple}
      defaultMenuIsOpen={open}
      defaultValue={defaultValue}
      options={options}
      onChange={onChange}
      classNamePrefix="select"
    />
  </div>
);

Select.defaultProps = {
  options: undefined,
  open: false,
  defaultValue: undefined,
  onChange: undefined,
  multiple: false,
  clearable: false,
  label: undefined,
};

Select.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      value: PropTypes.string,
      label: PropTypes.string,
    })
  ),
  open: PropTypes.bool,
  defaultValue: PropTypes.node,
  onChange: PropTypes.func,
  multiple: PropTypes.bool,
  clearable: PropTypes.bool,
  label: PropTypes.string,
};

export default Select;