let DateFns = dateFns;

class DateText extends React.Component {
  render() {
    return (
      <p style={{textAlign: "center"}}>{"Selected Date: " + this.props.formattedDate}</p>
    )
  }
}

function formatDateToDay(date) {
  return DateFns.format(date, 'D');
}

function clone(d) {
  return new Date(d.getTime());
}

function getCurrentDate() {
  return new Date();
}

function DateList(props) {
  let dateList = props.dates.map((date, index) => {
    return <button
      onClick={(e) => props.setSelectedDate(date, e)}
      className={'dateButton'}
             disabled={!date.isCurrentMonth}
      key={index}>{formatDateToDay(date.date)}
    </button>
  })
  return <div className={'calendar'}>{dateList}</div>;
}



class DayPickerHeader extends React.Component {
  render() {
    return (
      <header className={'header'}>
        <span>{this.props.currentMonthLabel + " " + this.props.currentYear}</span>
        <button onClick={this.props.previousMonth}>&lt;</button>
        <button onClick={this.props.nextMonth}>&gt;</button>
      </header>
    )
  }
}

class Headings extends React.Component {
  render() {
    return (
      <div className={'headings'}>
        {
          this.props.dayLabels.map((day, index) => {
            return <span className={'dayLabel'} key={index}>{day}</span>
          })
        }
      </div>
    )
  }
}

class Calendar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      today: props.currDate || new Date(),
      selectedDate: props.currDate || new Date(),
      currentDateCursor: new Date(),
      dayLabels: [
        'S', 'M', 'T', 'W', 'Th', 'F', 'S'
      ],
      monthLabels: [
        "January", "February", "March",
        "April", "May", "June",
        "July", "August", "September",
        "October", "November", "December"
      ],
    }
  }

  curMonth = () => {
    return this.state.currentDateCursor.getMonth();
  }

  curYear = () => {
    return this.state.currentDateCursor.getFullYear();
  }

  curMonthLabel = () => {
    return this.state.monthLabels[this.curMonth()];
  }


  selectedMonth = () => {
    return this.state.selectedDate.getMonth();
  }

  selectedMonthLabel = () => {
    return this.state.monthLabels[this.selectedMonth()];
  }

  datesArray = () => {
    const date = this.state.currentDateCursor;
    const startOfMonth = DateFns.startOfMonth(date);
    const endOfMonth = DateFns.endOfMonth(date);
    const days = DateFns.eachDay(startOfMonth, endOfMonth);
    const dates = days.map((day) => ({
      date: day,
      isCurrentMonth: DateFns.isSameMonth(new Date(this.curYear(), this.curMonth()), day),
      isToday: DateFns.isToday(day),
      isSelected: DateFns.isSameDay(day, this.state.selectedDate)
    }));

    // get days from last month
    let previousMonthCursor = DateFns.lastDayOfMonth(DateFns.addMonths(date, -1));
    const begIndex = DateFns.getDay(days[0]);
    for (let i = begIndex; i > 0; i--) {
      dates.unshift({
        date: previousMonthCursor,
        isCurrentMonth: false,
        isToday: DateFns.isToday(previousMonthCursor),
        isSelected: DateFns.isSameDay(this.state.selectedDate, previousMonthCursor)
      });
      previousMonthCursor = DateFns.addDays(previousMonthCursor, -1);
    }

    // get days from next month
    let daysNeededAtEnd = dates.length % 7 > 0 ? (7 - (dates.length) % 7) : 0;
    let nextMonthCursor = DateFns.addMonths(date, 1);
    nextMonthCursor = DateFns.setDate(nextMonthCursor, 1);
    for (let i = 1; i <= daysNeededAtEnd; ++i) {
      dates.push({
        date: nextMonthCursor,
        isCurrentMonth: false,
        isToday: DateFns.isToday(nextMonthCursor),
        isSelected: DateFns.isSameDay(this.state.selectedDate, nextMonthCursor)
      });
      nextMonthCursor = DateFns.addDays(nextMonthCursor, 1);
    }

    return dates;
  }

  componentDidMount() {
    if (this.props.startDate) {
      this.setState({
        currentDateCursor: this.props.startDate,
        selectedDate: this.props.startDate
      });
    }
  }

  setSelectedDate = (date, e) => {
    // console.log(date.date);
    this.props.changeCurrentDate(date, e);
    this.setState({
      selectedDate: date.date
    });
  }

  nextMonth = () => {
    let date = clone(this.state.currentDateCursor);
    this.setState({
      currentDateCursor: DateFns.addMonths(date, 1)
    })
  }

  previousMonth = () => {
    let date = clone(this.state.currentDateCursor);
    this.setState({
      currentDateCursor: DateFns.addMonths(date, -1)
    })
  }
  render() {
    let dates = this.datesArray();
    return (
      <div className={'dayPicker'}>
        <DayPickerHeader
          nextMonth={this.nextMonth}
          previousMonth={this.previousMonth}
          currentMonthLabel={this.curMonthLabel()}
          currentYear={this.curYear()} />
        <Headings
          dayLabels={this.state.dayLabels} />
        <DateList
          setSelectedDate={this.setSelectedDate}
          dates={dates}></DateList>
      </div>
    )
  }
}

class DayPicker extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDate: getCurrentDate(),
    }
  }

  getFormattedDate = () => {
    // console.log(this.state.currentDate);
    return DateFns.format(this.state.currentDate, 'MM/DD/YYYY');
  }


  changeCurrentDate = (date, e) => {
    this.setState({
      currentDate: date.date
    })
  }
  render() {
    return (
      <div>
        <DateText formattedDate={this.getFormattedDate()} />
        <Calendar
          currDate={this.state.currentDate}
          changeCurrentDate={this.changeCurrentDate}
        />
      </div>
    )
  }
}


ReactDOM.render(<DayPicker />, document.getElementById('root'));