const Calendar = (props) => {
  const incrementMonths = () => {
    props.onDatesChange({
      startDate:
        (props.startDate && props.startDate.add(2, "months")) ||
        moment(new Date()).add(2, "months"),
      endDate:
        (props.endDate && props.endDate.add(2, "months")) ||
        moment(new Date()).add(3, "months")
    });
  };

  return (
    <>
      <DayPickerRangeController
        startDate={props.startDate}
        endDate={props.endDate}
        numberOfMonths={2}
        noBorder
        onDatesChange={props.onDatesChange}
        onFocusChange={props.onFocusChange}
        initialVisibleMonth={() => props.startDate || moment()}
        focusedInput={props.focusedInput}
        hideKeyboardShortcutsPanel
        firstDayOfWeek={1}
        daySize={44}
        weekDayFormat="dd"
        horizontalMonthPadding={5}
      />
      <div
        style={{
          background: "red",
          padding: "20px",
          color: "white",
          cursor: "pointer"
        }}
        onClick={incrementMonths}
      >
        Add 2 Months +
      </div>
    </>
  );
};

export class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      focusedInput: "startDate"
    };
  }

  onDatesChange = ({ startDate, endDate }) => {
    this.setState({ startDate, endDate });
  };

  onFocusChange = (focusedInput) => {
    this.setState({
      focusedInput: !focusedInput ? "startDate" : focusedInput
    });
  };

  render() {
    return (
      <Calendar
        onDatesChange={this.onDatesChange}
        onFocusChange={this.onFocusChange}
        focusedInput={this.state.focusedInput}
        startDate={this.state.startDate}
        endDate={this.state.endDate}
      />
    );
  }
}