import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Icon from '../../visuals/Icon/Icon';

const ArrowDownIcon = require('../../visuals/Icon/svg/ic_keyboard_arrow_down.svg');

class SelectElement extends Component {
  static propTypes = {
    options: PropTypes.arrayOf(
      PropTypes.shape({
        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      })
    ).isRequired,
    placeholder: PropTypes.string,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  };
  static defaultProps = {
    placeholder: null,
    value: '',
  };
  render() {
    const { options, placeholder, ...props } = this.props;
    return (
      <div className="Input-fieldWithIcon">
        <select required className="Input-field" value={this.props.value} {...props}>
          <option value="" disabled hidden>
            {placeholder}
          </option>
          {options.map(opt => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
        <Icon className="Input-selectIcon" icon={ArrowDownIcon} />
      </div>
    );
  }
}

export default SelectElement;