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

const onDateKeyDown = (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 Component for Mobile date range selector calendar. It uses react-datepicker.
 * It accepts all additional props of react-datepicker.
 */

const MobileDateRangeCalendar = (props) => {
    return (
        <div className={'jp-mobile-range-calendar-container ' + props.parentClassName}>
            <div className='checkin-block'>
                <div className="datelabel">{props.startDateLabel}</div>
                <DatePicker
                    shouldCloseOnSelect={props.shouldCloseOnSelect}
                    onKeyDown={onDateKeyDown}
                    dateFormat={props.dateFormatMobileRange}
                    selected={props.mobileRangeStartDateSelected}
                    selectsStart
                    startDate={props.mobileRangeStartDate}
                    endDate={props.mobileRangeEndDate}
                    onChange={props.handleChangeStartMobileRange}
                    showMonthDropdown={props.showMobileMonthDropdown}
                    showYearDropdown={props.showMobileYearDropdown}
                    minDate={props.mobileRangeMinDate}
                    maxDate={props.mobileRangeMaxDate}
                    dateFormatCalendar={props.dateFormatCalendar}
                    formatWeekDay={weekDay => {
                        return weekDay.substring(0, props.lengthOfWeekDay);
                    }}
                    ref={el => onDatepickerRef(el)}
                />
            </div>
            <div className='checkin-block2'>
                <div className='datelabel'>{props.endDateLabel}</div>
                <DatePicker
                    shouldCloseOnSelect={props.shouldCloseOnSelect}
                    onKeyDown={onDateKeyDown}
                    dateFormat={props.dateFormatMobileRange}
                    selected={props.mobileRangeEndDateSelected}
                    selectsEnd
                    startDate={props.mobileRangeStartDate}
                    endDate={props.mobileRangeEndDate}
                    onChange={props.handleChangeEndMobileRange}
                    showMonthDropdown={props.showMobileMonthDropdown}
                    showYearDropdown={props.showMobileYearDropdown}
                    minDate={props.mobileRangeMinDate}
                    maxDate={props.mobileRangeMaxDate}
                    dateFormatCalendar={props.dateFormatCalendar}
                    formatWeekDay={weekDay => {
                        return weekDay.substring(0, props.lengthOfWeekDay);
                    }}
                    ref={el => onDatepickerRef(el)}
                />
            </div>
        </div>
    );
};

export default MobileDateRangeCalendar;

MobileDateRangeCalendar.defaultProps = {
    showMobileMonthDropdown: true,
    showMobileYearDropdown: true,
    dateFormatCalendar: 'MMMM',
    dateFormatMobileRange: 'dd  MMM  yyyy',
    mobileRangeStartDate: new Date(),
    mobileRangeEndDate: new Date().setDate(new Date().getDate() + 2),
    mobileRangeMinDate: new Date(),
    mobileRangeMaxDate: new Date().setMonth(new Date().getMonth() + 12),
    lengthOfWeekDay: 1,
    mobileRangeStartDateSelected: new Date(),
    mobileRangeEndDateSelected: new Date().setDate(new Date().getDate() + 2),
    parentClassName: '',
    shouldCloseOnSelect: false,
    startDateLabel:'CHECK-IN',
    endDateLabel:'CHECK-OUT'
};

MobileDateRangeCalendar.propTypes = {
    /** date format */
    dateFormatMobileRange: PropTypes.string,
    /** selected start date in input Box */
    mobileRangeStartDateSelected: PropTypes.instanceOf(Date),
    /** selected End date in input Box*/
    mobileRangeEndDateSelected: PropTypes.instanceOf(Date),
    /** start Date */
    mobileRangeStartDate: PropTypes.instanceOf(Date),
    /** End Date */
    mobileRangeEndDate: PropTypes.instanceOf(Date),
    /** function to change start date */
    handleChangeStartMobileRange: PropTypes.func,
    /** function to change start date */
    handleChangeEndMobileRange: PropTypes.func,
    /** show month dropdown  */
    showMobileMonthDropdown: PropTypes.bool,
    /** show year Dropdown */
    showMobileYearDropdown: PropTypes.bool,
    /** minimum date visible */
    mobileRangeMinDate: PropTypes.instanceOf(Date),
    /** Maximum selectable date */
    mobileRangeMaxDate: PropTypes.instanceOf(Date),
    /** dateFormatCalendar  */
    dateFormatCalendar: PropTypes.string,
    /** length of week day names */
    lengthOfWeekDay: PropTypes.number,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string,
    /** should close on select date */
    shouldCloseOnSelect: PropTypes.bool,
    /** label for start date */
    startDateLabel: PropTypes.string,
    /** label for end date */
    endDateLabel: PropTypes.string,
};