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

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

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

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

        const initialStartDate = props.startDate ? moment(props.startDate, defaultDateFormat) : moment().startOf('month');
        let initialEndDate = props.endDate ? moment(props.endDate, defaultDateFormat) : moment();

        if (initialStartDate > initialEndDate){
            initialEndDate = initialStartDate.add(1, 'day');
        }

        this.state = {
            startDate: initialStartDate,
            endDate: initialEndDate,
            error: null,
            startDateLabel: props.startDateLabel || 'Start date',
            endDateLabel: props.endDateLabel || 'End date',
        };
    }

    onStartDateChange(event) {
        const { endDate, startDateLabel, endDateLabel } = this.state;

        const newStartDate = moment(event.target.value, defaultDateFormat);
        if (newStartDate > endDate){
            this.setState({
                error: `${startDateLabel} cannot be after ${endDateLabel}`
            });
            return;
        }
        this.setState({startDate: newStartDate, error: null});
    }

    onEndDateChange(event) {
        const { startDate, startDateLabel, endDateLabel } = this.state;

        const newEndDate = moment(event.target.value, defaultDateFormat);
        if (newEndDate < startDate){
            this.setState({
                error: `${startDateLabel} cannot be after ${endDateLabel}`
            });
            return;
        }
        this.setState({endDate: newEndDate, error: null});
    }

    onDismiss() {
        this.setState({error: null});
    }

    onButtonClick() {
        const { onDatesUpdate } = this.props;
        const { startDate, endDate } = this.state;

        if (onDatesUpdate){
            onDatesUpdate({
                startDate: startDate.format(defaultDateFormat),
                endDate: endDate.format(defaultDateFormat),
            });
        }
    }

    componentDidMount() {
        this.onButtonClick();
    }

    render() {
        const { startDate, endDate, error, startDateLabel, endDateLabel } = this.state;
        const { inlineButton } = this.props;

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

        const startDateValue = startDate.format(defaultDateFormat);
        const endDateValue = endDate.format(defaultDateFormat);

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

        return (
            <Form>
                <Grid stackable columns={inlineButton ? null : 'equal'}>
                    <Grid.Row>
                        <Grid.Column width={inlineButton ? 7 : null}>
                            <label>{startDateLabel}</label>
                            <Form.Input
                                fluid
                                required
                                type="date"
                                value={startDateValue}
                                onChange={this.onStartDateChange.bind(this)}
                            />
                        </Grid.Column>
                        <Grid.Column width={inlineButton ? 6 : null}>
                            <label>{endDateLabel}</label>
                            <Form.Input
                                fluid
                                required
                                type="date"
                                value={endDateValue}
                                onChange={this.onEndDateChange.bind(this)}
                            />
                        </Grid.Column>
                        {
                            inlineButton && buttonRender
                        }
                    </Grid.Row>
                    { error &&
                        <Grid.Row>
                            <Grid.Column>
                                <Message color="orange" onDismiss={this.onDismiss.bind(this)}>
                                    <Message.Header>Wrong date</Message.Header>
                                    <p><b>{startDateLabel}</b> has to be before <b>{endDateLabel}</b></p>
                                </Message>
                            </Grid.Column>
                        </Grid.Row>
                    }
                    {
                        !inlineButton &&
                        <Grid.Row>
                            {buttonRender}
                        </Grid.Row>
                    }
                </Grid>
            </Form>
        );
    }
}

export default DateRangePicker;