import React from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const onDateOfBirthKeyDown = (event) => {
    if (event.keyCode !== 9) { // Allowing only Tab
        event.preventDefault();
        return false;
    }
};

const onDatepickerRef = (el) => {
    if (el && el.input) {
        el.input.readOnly = true;
    }
};

/**
 * A stateless datepicker for mobile. It uses react-datepicker. helps for simple date selection and date range selection. datepicker will receive all additional props.
 */

const MobileCalendar = (props) => {
    return (
        <div className={'jp-mobile-calendar-container ' + props.parentClassName}>
            <DatePicker
                {...props}                
                onKeyDown={onDateOfBirthKeyDown}
                minDate={props.minDate}
                maxDate={props.maxDate}
                shouldCloseOnSelect={props.shouldCloseOnSelect}
                dateFormat={props.dateFormat}
                selected={props.selected}
                onChange={props.handleChangeDateSelected}
                dateFormatCalendar={props.dateFormatCalendar}
                showYearDropdown
                scrollableYearDropdown
                showMonthDropdown
                dropdownMode='scroll'
                yearDropdownItemNumber={props.yearDropdownItemNumber}
                formatWeekDay={weekDay => {
                    return weekDay.substring(0, props.lengthOfWeekDay);
                }}
                ref={el => onDatepickerRef(el)}
            />
        </div>

    );
};

export default MobileCalendar;

MobileCalendar.defaultProps = {
    dateFormat: 'dd MMM yyyy',
    selected: new Date(),
    dateFormatCalendar: 'MMMM',
    showYearDropdown: true,
    scrollableYearDropdown: true,
    parentClassName: '',
    lengthOfWeekDay:1,
    yearDropdownItemNumber:100,
    shouldCloseOnSelect:false
};

MobileCalendar.propTypes = {
    /** min date is required only to limit year, month and dates.. */
    minDate: PropTypes.instanceOf(Date),
    /** max Date is required only to limit year, month and dates..*/
    maxDate: PropTypes.instanceOf(Date),
    /** calender should close on selecting the date */
    shouldCloseOnSelect: PropTypes.bool,
    /** date format in input textbox of calendar */
    dateFormat: PropTypes.string.isRequired,
    /** selected date from calendar */
    selected: PropTypes.instanceOf(Date),
    /** years list */
    showYearDropdown: PropTypes.bool.isRequired,
    /** scrollable years */
    scrollableYearDropdown: PropTypes.bool.isRequired,
    /** month format of calendar */
    dateFormatCalendar: PropTypes.string.isRequired,
    /** function to select date */
    handleChangeDateSelected: PropTypes.func,
    /* Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
    /** length of weekdays */
    lengthOfWeekDay:PropTypes.number,
    /** number of years visible */
    yearDropdownItemNumber: PropTypes.number
};