import React from 'react';
import { Row, Col } from 'react-bootstrap';
import DayPicker, { DateUtils } from 'react-day-picker';
import { Card, DatePicker } from '../../components/index';

/**
 * Initial page that declare all routes of the module
 */
export default class DatePickerExamples extends React.Component {

    constructor(props) {
        super(props);
        this.onDayClick = this.onDayClick.bind(this);
        this.datePickerChange = this.datePickerChange.bind(this);

        this.state = { day: new Date(), dayPicker: new Date() };
    }

    onDayClick(e, day) {
        this.setState({ day: day });
    }

    datePickerChange(e, day) {
        this.setState({ dayPicker: day });
    }

    render() {
        const selday = this.state.day;

        // display the selected day
        const modifiers = {
            selected: day => selday ? DateUtils.isSameDay(day, selday) : false
        };

        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { title: 'Date picker' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 5 },
                        React.createElement(DatePicker, { label: 'Start Date:', value: this.state.dayPicker,
                            onChange: this.datePickerChange })
                    ),
                    React.createElement(
                        Col,
                        { md: 3 },
                        this.state.dayPicker.toString()
                    )
                )
            ),
            React.createElement(
                Card,
                { title: 'Calendar' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { mdOffset: 3, md: 6 },
                        React.createElement(DayPicker, { modifiers: modifiers,
                            onDayClick: this.onDayClick })
                    )
                )
            )
        );
    }
}