import React from 'react';
import './day.less';

/**\

    title: Day
    category: Atom
    description: creates a calendar day cell
    props:
        date[Date]: the date that this cell represents, only M/D/Y used
        selected[Boolean]: whether the date is selected or not
        inRange[Boolean]: whether the date is in range; for styling
        disabled[Boolean]: whether the date is disabled
        className[String]: arbitrary string to add as CSS classes
        onMouseEnter[Function]: a callback for when mouse enters
        onClick[Function]: a callback for when the day is clicked

\**/
class Day extends React.Component {
    static defaultProps = {
        date: null,
        selected: false,
        inRange: false,
        disabled: false
    };

    static propTypes = {
        date: React.PropTypes.instanceOf(Date),
        selected: React.PropTypes.bool,
        inRange: React.PropTypes.bool,
        disabled: React.PropTypes.bool,
        className: React.PropTypes.string,
        onMouseEnter: React.PropTypes.func,
        onClick: React.PropTypes.func
    };

    onMouseEnter() {
        const { disabled, date, onMouseEnter } = this.props;

        if (disabled || !date) {
            return;
        }

        if (typeof onMouseEnter === 'function') {
            onMouseEnter(date);
        }
    }

    onClick() {
        const { disabled, date, onClick } = this.props;

        if (disabled || !date) {
            return;
        }

        if (typeof onClick === 'function') {
            onClick(date);
        }
    }

    render() {
        const { selected, inRange, disabled, date, className } = this.props;
        let classer = 'day';

        if (selected) {
            classer += ' selected';
        }

        if (inRange) {
            classer += ' in-range';
        }

        if (disabled || !date) {
            classer += ' disabled';
        }

        if (!date) {
            classer += ' empty';
        }

        if (className) {
            classer += ' ' + className;
        }

        return (
            <div className={ classer }
                onMouseEnter={ this.onMouseEnter.bind(this) }
                onClick={ this.onClick.bind(this) } >
                { date ? date.getDate() : null }
            </div>
        );
    }
}

export default Day;
