import React, { Component } from 'react';
import moment from 'moment';

import { Form, Grid } from 'semantic-ui-react';

import { defaultDateFormat } from '../../constants/constants';

class MonthSelector extends Component {
    constructor(props) {
        super(props);

        const initialDateTime = moment();
        const initialMonth = (initialDateTime.month() === 0) ? 11 : initialDateTime.month() - 1;
        const initialYear = (initialDateTime.month() === 0) ? initialDateTime.year() - 1 : initialDateTime.year();

        this.state = {
            month: initialMonth,
            year: initialYear,
            monthLabel: props.monthLabel || 'Month',
            yearLabel: props.yearLabel || 'Year',
        };
    }

    onMonthSelectionChange = (event, data) => {
        const newMonthValue = data.value;
        this.setState({month: newMonthValue});
    };

    onYearChange = (event) => {
        const newYearValue = event.target.value ? parseInt(event.target.value) : this.state.year;
        this.setState({year: newYearValue});
    };

    onButtonClick() {
        const { onDatesUpdate } = this.props;
        const { month, year } = this.state;

        const monthYearMoment = moment().month(month).year(year);

        if (onDatesUpdate){
            onDatesUpdate({
                startDate: monthYearMoment.clone().startOf('month').format(defaultDateFormat),
                endDate: monthYearMoment.clone().endOf('month').format(defaultDateFormat),
            });
        }
    }

    componentDidMount() {
        this.onButtonClick();
    }

    render() {
        const { month, year, monthLabel, yearLabel } = this.state;
        const { inlineButton } = this.props;

        const buttonLabel = this.props.buttonLabel || 'Save';

        const buttonRender = (
            <Grid.Column width={inlineButton ? 3 : null}>
                { inlineButton && <label>{'\u00A0'}</label> }
                <Form.Button onClick={this.onButtonClick.bind(this)}>{buttonLabel}</Form.Button>
            </Grid.Column>
        );

        const monthDropdownOptions = [
            {value: 0, text: 'January'},
            {value: 1, text: 'February'},
            {value: 2, text: 'March'},
            {value: 3, text: 'April'},
            {value: 4, text: 'May'},
            {value: 5, text: 'June'},
            {value: 6, text: 'July'},
            {value: 7, text: 'August'},
            {value: 8, text: 'September'},
            {value: 9, text: 'October'},
            {value: 10, text: 'November'},
            {value: 11, text: 'December'},
        ];

        return (
            <Form>
                <Grid stackable columns={inlineButton ? null : 'equal'}>
                    <Grid.Row>
                        <Grid.Column width={inlineButton ? 7 : null}>
                            <label>{monthLabel}</label>
                            <Form.Dropdown
                                options={monthDropdownOptions}
                                fluid
                                selection
                                defaultValue={month}
                                onChange={this.onMonthSelectionChange}
                            />
                        </Grid.Column>
                        <Grid.Column width={inlineButton ? 6 : null}>
                            <label>{yearLabel}</label>
                            <Form.Input
                                fluid
                                required
                                type="number"
                                value={year}
                                onChange={this.onYearChange}
                            />
                        </Grid.Column>
                        {
                            inlineButton && buttonRender
                        }
                    </Grid.Row>
                    {
                        !inlineButton &&
                        <Grid.Row>
                            {buttonRender}
                        </Grid.Row>
                    }
                </Grid>
            </Form>
        );
    }
}

export default MonthSelector;