const daysToAdjust = {
    "37": -1,
    "38": -7,
    "39": 1,
    "40": 7
};

function cloneDate(date) {
    return new Date(date.valueOf());
}

function isValidDate(value, format = "mm/dd/yyyy") {
    let month, day, year;
    const delimiter = /[^mdy]/.exec(format)[0];
    const formatParts = format.split(delimiter);
    const dateParts = value.split(delimiter);

    for (let i = 0; i < dateParts.length; i++) {
        if (/m/.test(formatParts[i])) month = dateParts[i];
        if (/d/.test(formatParts[i])) day = dateParts[i];
        if (/y/.test(formatParts[i])) year = dateParts[i];
    }

    return (
        month > 0 &&
        month < 13 &&
        year &&
        year.length === 4 &&
        day > 0 &&
        day <= new Date(year, month, 0).getDate()
    );
}

function getFirstDayofWeek(date) {
    const temp = cloneDate(date);

    temp.setDate(temp.getDate() - temp.getDay());

    return temp;
}

function getAllDaysInAWeek(date) {
    const weekStartDate = getFirstDayofWeek(date);
    const days = [weekStartDate];

    for (let i = 1; i <= 6; i++) {
        const next = cloneDate(weekStartDate);

        next.setDate(next.getDate() + i);
        days.push(next);
    }

    return days;
}

function WeekHeader() {
    var header = ["S", "M", "T", "W", "T", "F", "S"].map(function(day, index) {
        return (
            <span key={day + index} className="day-header">
                {day}
            </span>
        );
    });

    return header;
}

function buildWeeks(date) {
    const tempDate = cloneDate(date);

    tempDate.setDate(1);

    const month = tempDate.getMonth();
    const weekStartDate = getFirstDayofWeek(tempDate);
    const currentDate = cloneDate(weekStartDate);
    const weeks = [cloneDate(currentDate)];

    currentDate.setDate(currentDate.getDate() + 7);

    while (currentDate.getMonth() === month) {
        weeks.push(cloneDate(currentDate));
        currentDate.setDate(currentDate.getDate() + 7);
    }

    return weeks;
}

function isWeekend(date) {
    const weekday = date.getDay();

    return weekday === 0 || weekday === 6;
}

function Day({ day, month, selected, onSelect }) {
    let className =
        day.getMonth() !== month || isWeekend(day) ? "disabled" : "";

    if (day.getTime() === selected.getTime()) {
        className = "selected";
    }

    return (
        <span
            className={"day " + className}
            onMouseUp={onSelect.bind(null, day)}
        >
            {day.getDate()}
        </span>
    );
}

function Week({ weekStart, selected, month, onSelect }) {
    return (
        <div className="days-wrapper">
            {getAllDaysInAWeek(weekStart).map(function(day, i) {
                return (
                    <Day
                        key={i}
                        month={month}
                        day={new Date(day)}
                        selected={selected}
                        onSelect={onSelect}
                    />
                );
            })}
        </div>
    );
}

function Weeks({ date, month, selected, onSelect }) {
    return (
        <div>
            {buildWeeks(date).map(
                function(day, i) {
                    return (
                        <Week
                            key={i}
                            month={month}
                            weekStart={day}
                            selected={selected}
                            onSelect={onSelect}
                        />
                    );
                }.bind(this)
            )}
        </div>
    );
}

const Calendar = React.createClass({
    getInitialState: function() {
        return {
            selected: this.props.selectedDate
        };
    },

    componentWillReceiveProps({ selectedDate }) {
        this.setState({
            selected: new Date(selectedDate)
        });
    },

    setDate: function(selected) {
        this.setState({ selected }, this.props.onMonthChange);
    },

    nextMonth: function() {
        const clone = new Date(this.state.selected);

        clone.setMonth(this.state.selected.getMonth() + 1);
        this.setDate(clone);
    },

    previousMonth: function() {
        const clone = new Date(this.state.selected);

        clone.setMonth(this.state.selected.getMonth() - 1);
        this.setDate(clone);
    },

    render: function() {
        const { selected } = this.state;
        const { onSelect, selectedDate } = this.props;
        const year = selected.getFullYear();
        const month = selected.toLocaleString("en-us", { month: "long" });

        return (
            <div>
                <div className="month-header-wrapper">
                    <span className="title-wrapper">
                        <span className="month-title">{month}</span>
                        <span className="year-title ">{year}</span>
                    </span>
                    <span className="arrow right" onClick={this.nextMonth}>
                        &gt;
                    </span>
                    <span className="arrow right" onClick={this.previousMonth}>
                        &lt;
                    </span>
                </div>
                <div className="day-header-wrapper">{WeekHeader()}</div>
                <Weeks
                    date={selected}
                    onSelect={onSelect}
                    selected={selectedDate}
                    month={selected.getMonth()}
                />
            </div>
        );
    }
});

const DatePicker = React.createClass({
    getInitialState: function() {
        return {
            isOpen: false,
            isFocused: false,
            currentSelected: new Date(),
            // change to desired format
            tempDate: new Date().toLocaleDateString()
        };
    },

    componentDidMount: function() {
        document.addEventListener("click", this.handleWindowMouseDown);
    },

    handleWindowMouseDown(event) {
        const datepicker = ReactDOM.findDOMNode(this.datePicker);
        const calendar = ReactDOM.findDOMNode(this.calendar);

        if (!(calendar && datepicker)) {
            return;
        }

        const eventIsOutside =
            !calendar.contains(event.target) && calendar !== event.target;
        const eventIsOnPopoverAnchor =
            datepicker.contains(event.target) || datepicker === event.target;

        if (eventIsOutside && !eventIsOnPopoverAnchor) {
            this.setState({ isOpen: false });
        }
    },

    close: function() {
        this.setState({ isOpen: false, isFocused: false });
    },

    handleKeyDown: function(event) {
        switch (event.keyCode) {
            case 37:
            case 38:
            case 39:
            case 40:
                if (!event.shiftKey) {
                    return;
                }

                event.preventDefault();

                const newDate = new Date(this.state.currentSelected);

                newDate.setDate(
                    newDate.getDate() + daysToAdjust[event.keyCode]
                );

                this.setState({ currentSelected: newDate });

                return;
            case 13:
                event.preventDefault();

                const { isOpen, currentSelected } = this.state;

                if (!isOpen) {
                    this.setState({ isOpen: true });
                } else {
                    this.setState({
                        isOpen: false,
                        currentSelected,
                        tempDate: currentSelected.toLocaleDateString()
                    });
                }
                return;
            case 9:
                if (event.shiftKey || !this.state.isOpen) {
                    return;
                }

                this.close();

                return;
            case 27:
                this.close();

                return;
        }
    },

    handleFocus: function() {
        this.setState({ isFocused: true });
    },

    handleBlur: function() {
        this.setState({ isFocused: false });
    },

    open: function() {
        if (this.state.isOpen) {
            return;
        }

        this.setState({ isOpen: true });

        this.input.focus();
    },

    select: function(currentSelected) {
        this.setState({
            isOpen: false,
            currentSelected,
            invalidDate: false,
            tempDate: currentSelected.toLocaleDateString()
        });

        this.input.focus();
    },

    updateDate({ target: { value } }) {
        const newState = { tempDate: value, invalidDate: true };

        if (isValidDate(value)) {
            newState.invalidDate = false;
            newState.currentSelected = new Date(value);
        }

        this.setState(newState);
    },

    render: function() {
        const {
            isOpen,
            tempDate,
            isFocused,
            currentSelected,
            invalidDate = false,
        } = this.state;
        const isInvalid = invalidDate ? " is-invalid" : "";
        const focusClass =
            !invalidDate && (isFocused || isOpen) ? " is-focused" : "";

        return (
            <div
                className="datepicker-wrapper"
                ref={ref => (this.datePicker = ref)}
            >
                <div
                    onClick={this.open}
                    className={"datepicker-input" + focusClass + isInvalid}
                >
                    <span className="arrow-down" />
                    <label className="datepicker-label">From</label>
                    <input
                        type="text"
                        value={tempDate}
                        placeholder={"mm/dd/yyyy"}
                        onChange={this.updateDate}
                        onKeyDown={this.handleKeyDown}
                        ref={input => (this.input = input)}
                        className={"datepicker-value" + focusClass + isInvalid}
                    />
                </div>
                {isOpen && (
                    <div
                        className="datepicker-calendar"
                        ref={ref => (this.calendar = ref)}
                    >
                        <Calendar
                            onSelect={this.select}
                            selectedDate={currentSelected}
                            onMonthChange={() => this.input.focus()}
                        />
                    </div>
                )}
            </div>
        );
    }
});

ReactDOM.render(<DatePicker />, document.getElementById("container"));