import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {format} from 'date-fns';
import PropTypes from 'prop-types';
import React, {Fragment} from 'react';

export const DatePickerNav = ({
    visibleDate,
    startDate,
    endDate,
    isRange,
    onJump,
    onNext,
    onPrev,
}) => (
    <Fragment>
        <div className="calendar-nav">
            <div className="calendar-nav-prev-month" onClick={onPrev}>
                <button className="button is-primary">
                    <span className="icon">
                        <FontAwesomeIcon icon={['fas', 'chevron-left']} />
                    </span>
                </button>
            </div>
            <div className="calendar-month">
                {format(visibleDate, 'MMMM YYYY')}
            </div>
            <div className="calendar-nav-next-month" onClick={onNext}>
                <button className="button is-primary">
                    <span className="icon">
                        <FontAwesomeIcon icon={['fas', 'chevron-right']} />
                    </span>
                </button>
            </div>
        </div>
        {isRange && (
            <div className="calendar-nav calendar-nav-range">
                <a
                    className="button is-primary"
                    onClick={() => onJump(startDate)}
                >
                    {format(startDate, 'YYYY-MM-DD')}
                </a>
                <span className="icon">
                    <FontAwesomeIcon icon={['fas', 'long-arrow-alt-right']} />
                </span>
                <a
                    className="button is-primary"
                    onClick={() => onJump(endDate)}
                >
                    {format(endDate, 'YYYY-MM-DD')}
                </a>
            </div>
        )}
    </Fragment>
);

DatePickerNav.propTypes = {
    endDate: PropTypes.instanceOf(Date),
    isRange: PropTypes.bool,
    onJump: PropTypes.func,
    onNext: PropTypes.func.isRequired,
    onPrev: PropTypes.func.isRequired,
    startDate: PropTypes.instanceOf(Date),
    visibleDate: PropTypes.instanceOf(Date),
};

export default DatePickerNav;