import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SearchIcon from 'react-icons/lib/md/search';
import StudentIcon from 'react-icons/lib/md/person';
import RoomIcon from 'react-icons/lib/md/room';
import ClassIcon from 'react-icons/lib/md/group';
import TeacherIcon from 'react-icons/lib/md/account-circle';

const userShape = {
  value: PropTypes.string.isRequired,
  type: PropTypes.string.isRequired,
};

const Result = ({ user }) => {
  let icon;

  switch (user.type) {
    case 'c':
      icon = <ClassIcon />;
      break;
    case 't':
      icon = <TeacherIcon />;
      break;
    case 's':
      icon = <StudentIcon />;
      break;
    case 'r':
      icon = <RoomIcon />;
      break;
    default:
      throw new Error(`Invalid user type: ${user.type}`);
  }

  return (
    <div className="search__result">
      <div className="search__icon-wrapper">{icon}</div>
      <div className="search__result__text">{user.value}</div>
    </div>
  );
};

Result.propTypes = {
  user: PropTypes.shape(userShape).isRequired,
};

const Search = ({
  onInputChange,
  onFocus,
  onBlur,
  hasFocus,
  value,
  results,
}) => (
  <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
    <div className="search__input-wrapper">
      <div className="search__icon-wrapper"><SearchIcon /></div>
      <input
        onChange={onInputChange}
        value={value}
        placeholder="Zoeken"
        onFocus={onFocus}
        onBlur={onBlur}
      />
    </div>
    {results.map(user => (
      <Result key={user.value} user={user} />
    ))}
  </div>
);

Search.propTypes = {
  onInputChange: PropTypes.func.isRequired,
  onFocus: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  hasFocus: PropTypes.bool.isRequired,
  value: PropTypes.string.isRequired,
  results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
};

export default Search;