import React from 'react';
import classnames from 'classnames';
import {getCourseStatus} from 'trc-client-core/src/mixins/CourseMixin';
import PureRender from 'react-addons-pure-render-mixin';

var GapReportGridCell = React.createClass({
    displayName: 'GapReportGridCell',
    mixins: [PureRender],
    onMouseOver(event) {
        var {offsetHeight, offsetWidth, offsetTop, offsetLeft} = this.refs.cell;

        this.props.onHover({
            offsetHeight,
            offsetWidth,
            offsetTop,
            offsetLeft
        });
    },
    render() {
        var {course, onClick, onHover} = this.props;
        var course_status = course.completed ? 'COMPLETED' : course.completionProcess;
        return (
            <div ref="cell" className="GapReportGrid_square" onClick={onClick} onMouseOver={this.onMouseOver} >
                <div className={classnames([
                    'GapReportGrid_status',
                    `is-${course.type}`,
                    course_status,
                    course.segment.replace(' ', '')
                ])}/>
            </div>
        );
    }
});

export default GapReportGridCell;