import React from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, DateRangePicker } from 'web-foundation';

const today = new Date();

function subtractDaysFromDate(date, days) {
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() - days);
}

const shortcuts = [
    {
        name: '7-Day',
        rangeStart: subtractDaysFromDate(today, 7),
        rangeEnd: today
    },
    {
        name: '30-Day',
        rangeStart: subtractDaysFromDate(today, 30),
        rangeEnd: today
    },
    {
        name: '6-Month',
        rangeStart: subtractDaysFromDate(today, 6 * 30),
        rangeEnd: today
    }
];

function logSelectedDates(dates) {
    /* eslint-disable no-console */
    console.log('date picker - date selected');
    console.log(dates);
    /* eslint-enable no-console */
}

export default function() {
    ReactDOM.render(
        <DatePicker
            onSelectDates={ logSelectedDates }
            startsOn={ 1 }
            shortcuts={ shortcuts } >
            <DateRangePicker month={ 9 } />
        </DatePicker>,
        document.getElementById('date-picker')
    );
}
