window.onload = function() {

  function renderCalendar() {
    const now = moment();
    const [day, month, year] = [now.date(), now.format('MM'), now.year()];
    const endOfMonth = now.endOf('month').format('DD');
    const prevMonthLength = now.subtract(1, 'months').endOf('month').format('DD');

    let [dayOfWeek, week] = [now.toDate().getDay() - 2, 0];

    let html = "<table>\n <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>\n";
    // other function

    [html, week] = prevDaysOfPrevMonth(html, dayOfWeek, prevMonthLength, week); // Render Previous days of prev mount
    [html, week] = daysOfCurrMonth(html, endOfMonth, week, day, month, year); // Render current month days
    [html, week] = daysOfNextMonth(html, week); // Render next mount days

    document.getElementById('currentDate').innerHTML = moment().format('DD, MMMM YYYY');
    document.getElementById('main').innerHTML = html;

    Array.from(document.getElementsByClassName('daysOfCurrMonth')).forEach((td) => {
      td.addEventListener('click', showWeekday);
    });
  }

  renderCalendar();

  function showWeekday(year,month,day) {

    console.log(moment(`${year}-${month}-${day}`).format('dddd'));
    //console.log(event.target.hasAttribute('data-year'));
    //event.target.setAttribute("data-id", "anotherId");
    //weekday
    // if(event.target.hasAttribute('data-year')){
    //
    // }
    //let weekDay = moment(`${event.target.dataset.year}-${event.target.dataset.month}-${event.target.dataset.day}`).format('dddd');

  }

  function prevDaysOfPrevMonth(outerHtml, daysOfWeek, prevMonthL, weekLen) {

    if (daysOfWeek > 0) {
      outerHtml += '  <tr>';
    }
    for (let i = Number(prevMonthL - daysOfWeek); i <= Number(prevMonthL); i++) {
      outerHtml += '<td class="prevMonth daysOfCurrMonth">' + i + '</td>';
      weekLen++;
    }
    return [outerHtml, weekLen];
  }

  function daysOfCurrMonth(outerHtml, end, weekLen, day, month, year) {

    for (let j = 1; j <= end; j++) {
      if (weekLen == 0) {
        outerHtml += " <tr>";
      }
      let today = '';
      if (day == j) {
        today = 'today';
        //outerHtml += `<td class="daysOfCurrMonth today" >` + j + '</td>';
      }
      outerHtml += `<td class="daysOfCurrMonth ${today}" data-month="${month}" data-year="${year}" data-day="${j}">` + j + '</td>';

      weekLen++;
      if (weekLen == 7) {
        outerHtml += '</tr> \n';
        weekLen = 0;
      }
    }
    return [outerHtml, weekLen];
  }

  function daysOfNextMonth(outerHtml, weekLen) {

    for (let k = 1; weekLen != 0; k++) {
      outerHtml += '<td class="nextMonth daysOfCurrMonth">' + k + '</td>';
      weekLen++;
      if (weekLen == 7) {
        outerHtml += '</tr> \n';
        weekLen = 0;
      }
    }
    return [outerHtml, weekLen];
  }



}


/*
Leap year Algorithm
    let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)){
        daysInMonth[1] = 29;
    }
*/