import React from 'react';
import { Cell } from 'fixed-data-table';
import classnames from 'classnames';
import moment from 'moment';
import { transformField, colorField, surprisePercent, marketString } from 'utils/calendar';

export default class CalendarCell extends React.Component {

  importanceIndicator(importance) {
    const importantClasses = classnames('importance-level', 'importance-level--' + importance);
    return (
      <svg className={importantClasses} xmlns="http://www.w3.org/2000/svg" viewBox="-3.25 -2.5 6.5 35.499">
        <circle cx="0" cy=".751" r="2.5" fill="#FFF" stroke="#E2E6ED" stroke-miterlimit="10" />
        <circle cx="0" cy="8.001" r="2.5" fill="#FFF" stroke="#E2E6ED" stroke-miterlimit="10" />
        <circle cx="0" cy="15.251" r="2.5" fill="#FFF" stroke="#E2E6ED" stroke-miterlimit="10" />
        <circle cx="0" cy="22.501" r="2.5" fill="#FFF" stroke="#E2E6ED" stroke-miterlimit="10" />
        <circle cx="0" cy="29.751" r="2.5" fill="#FFF" stroke="#E2E6ED" stroke-miterlimit="10" />
      </svg>
    );
  }

  render() {
    const { rowIndex, field, data, parameters, fieldData, hoveredRow } = this.props;
    const { calendarType } = parameters;

    const className = calendarType + '-' + field;
    const calendarEvent = data[rowIndex];
    let fieldValue = calendarEvent[field];
    if ('computeValue' in fieldData) {
      fieldValue = fieldData.computeValue(calendarEvent);
    }
    if (fieldValue === ('∞%') || fieldValue === ('-∞%') || typeof fieldValue === 'number' && !isFinite(fieldValue) ) {
      fieldValue = '';
    }
    const classes = classnames('Calendar-cell', className, colorField(field, fieldValue),
                               {'Calendar-hovered': hoveredRow === rowIndex});
    return (
      <Cell className={classes}>
        <div title={fieldValue}>
          {transformField(fieldData.transform, fieldValue)}
        </div>
      </Cell>
    );
  }
}

CalendarCell.propTypes = {
  data: React.PropTypes.array.isRequired,
  field: React.PropTypes.string.isRequired,
  fieldData: React.PropTypes.object,
  rowIndex: React.PropTypes.number,
  hoveredRow: React.PropTypes.number,
  parameters: React.PropTypes.object,
};