import React, { memo } from 'react';

const SRC = '/images/';

const User = memo(function User({
  color, webPlayer,
  name, desc, active, mines, haveBomb, enabledBomb,
  onClickBombSelector,
}) {
  const buzzClass = 'bomb-container'
    + (active && color === webPlayer && haveBomb && enabledBomb ? ' buzz' : '');

  const bombImg = haveBomb
    ? SRC + (enabledBomb && active ? 'bg-bomb-outbg.png' : 'bg-bomb-disabled-outbg.png')
    : SRC + 'bg-bomb-exploded-outbg.png';

  return (
    <div className={`user-container user-${color}`}>
      <div className="user-header">
        <div className="user-color">{color}</div>
        {active && <img src={`${SRC}bg-cursor-${color}-outbg.png`} alt="" className="user-cursor" />}
        <img src={`${SRC}bg-figure-${color}-outbg.png`} alt="" />
      </div>
      <div className="user-name"> {name} </div>
      <div className="user-caret"><i className="fa fa-caret-down" /></div>
      <div className="user-desc"> {desc} </div>
      <div className="user-control">
        <img src={`${SRC}bg-flag-${color}-outbg.png`} alt="" />
        <div className="user-control-mines">{mines}</div>
        <div className={buzzClass} onClick={onClickBombSelector}>
          <div className="bomb"><img src={bombImg} alt="" /></div>
        </div>
        <div className="clear" />
      </div>
    </div>
  );
});

export default User;