import React from 'react';
import { quoteService } from 'services';
import connectService from 'services/connect';
import generateEntityId from 'utils/entities';
import classnames from 'classnames';
import { openSecurity } from 'actions/workspaces';

class MiniSnapshot extends React.Component {
  render() {
    const { percentChange, symbol } = this.props;
    const changeClasses = classnames('snapshot__change', {'u-upText': percentChange > 0}, {'u-downText': percentChange < 0});

    let change = percentChange ? percentChange : 0;
    const changeAbs = Math.abs(change);
    if (changeAbs >= 10) {
      change = change.toFixed(1);
    } else if (changeAbs < 10 && changeAbs > 0) {
      change = change.toFixed(2);
    } else {
      change = parseInt(change, 10);
    }

    return (
      <li onClick={() => openSecurity(symbol)} className="snapshot">
        <div className="snapshot__name">{symbol}</div>
        <div className={changeClasses}>{change}%</div>
      </li>
    );
  }
}

MiniSnapshot.propTypes = {
  symbol: React.PropTypes.string,
  percentChange: React.PropTypes.number,
};

export default connectService(quoteService)(MiniSnapshot);