import React from 'react';
import DatePicker from 'react-datepicker';
import getYear from 'date-fns/get_year';
import getMonth from 'date-fns/get_month';
import PropTypes from 'prop-types';

import 'react-datepicker/dist/react-datepicker.css';

const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

const Calendar = props => {
    return (
        <div className={`jp-calendar-container ${props.parentClassName}`}>
            <DatePicker
                {...props}
                renderCustomHeader={({
                    date,
                    changeYear,
                    changeMonth,
                    decreaseMonth,
                    increaseMonth,
                    prevMonthButtonDisabled,
                    nextMonthButtonDisabled
                }) => (<div>
                    <div className="react-datepicker__header__dropdown react-datepicker__header__dropdown--scroll">
                        <button
                            className={`react-datepicker__navigation jp-pre-year ${prevMonthButtonDisabled ? 'react-datepicker__navigation--previous--disabled' : ''}`}
                            value={getYear(date) - 1}
                            onClick={({ target: { value } }) => changeYear(value)}
                            disabled={prevMonthButtonDisabled}
                        />

                        <div className="react-datepicker__year-read-view--selected-year">
                            {getYear(date)}
                        </div>

                        <button
                            className={`react-datepicker__navigation jp-next-year ${nextMonthButtonDisabled ? 'react-datepicker__navigation--next--disabled' : null}`}
                            value={getYear(date) + 1}
                            onClick={({ target: { value } }) => changeYear(value)}
                            disabled={nextMonthButtonDisabled}
                        />
                    </div>
                    <div className="react-datepicker__current-month react-datepicker__current-month--hasYearDropdown">
                        <button
                            className={`react-datepicker__navigation react-datepicker__navigation--previous ${prevMonthButtonDisabled ? 'react-datepicker__navigation--previous--disabled' : ''}`}
                            onClick={decreaseMonth}
                            disabled={prevMonthButtonDisabled}
                        />

                        <div className="react-datepicker__current-month react-datepicker__current-month--hasYearDropdown">
                            {months[getMonth(date)]}
                        </div>
                        <button
                            className={`react-datepicker__navigation react-datepicker__navigation--next ${nextMonthButtonDisabled ? 'react-datepicker__navigation--next--disabled' : ''}`}
                            onClick={increaseMonth}
                            disabled={nextMonthButtonDisabled}
                        />
                    </div>
                </div>)}
            />
        </div>
    );
};

export default Calendar;

Calendar.propTypes = {
    /** Custom classname for calander */
    parentClassName: PropTypes.string,
};

Calendar.defaultProps = {
    parentClassName: ''
};