import React from 'react';
import { Row, Col } from 'react-bootstrap';
import { Card, YearPicker, MonthYearPicker } from '../../components/index';

/**
 * Example of how to use the year picker and month-year picker control
 */
export default class ReacttableExample extends React.Component {

    constructor(props) {
        super(props);

        this.yearChange = this.yearChange.bind(this);
        this.yearChange2 = this.yearChange2.bind(this);
        this.monthYearChange = this.monthYearChange.bind(this);

        this.state = {};
    }

    yearChange(val) {
        this.setState({ year: val });
    }

    yearChange2(val) {
        this.setState({ endYear: val });
    }

    monthYearChange(prop) {
        return val => {
            const obj = {};
            obj[prop] = val;
            console.log(prop + ' = ', val);
            this.setState(obj);
        };
    }

    render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                Card,
                { title: 'Year picker' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 6 },
                        React.createElement(YearPicker, { value: this.state.year,
                            label: 'Initial year:',
                            onChange: this.yearChange })
                    ),
                    React.createElement(
                        Col,
                        { md: 6 },
                        React.createElement(YearPicker, { value: this.state.endYear,
                            label: 'Final year:',
                            bsStyle: 'error',
                            help: 'Enter the final year',
                            onChange: this.yearChange2 })
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 4, mdOffset: 4 },
                        React.createElement(YearPicker, { value: this.state.year,
                            noPopup: true,
                            onChange: this.yearChange })
                    )
                )
            ),
            React.createElement(
                Card,
                { title: 'Month year picker' },
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(MonthYearPicker, { value: this.state.monthYear,
                            label: 'Please select the month and year:',
                            onChange: this.monthYearChange('monthYear') })
                    )
                ),
                React.createElement(
                    Row,
                    null,
                    React.createElement(
                        Col,
                        { md: 12 },
                        React.createElement(MonthYearPicker, { value: this.state.period,
                            label: 'Select the period:',
                            period: true,
                            onChange: this.monthYearChange('period') })
                    )
                )
            )
        );
    }
}