<!DOCTYPE html>
<html>

<head>
  <%- include ("../partials/header.ejs") %>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css" rel="stylesheet" />
  <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  <script>
    dayjs().format()
  </script>
</head>

<body>
  <%- include ("../partials/nav.ejs") %>
  <div class="section" style="padding-left:6.5em; padding-right:6.5rem;">
    <div id='calendar'></div>
  </div>
  <script>
    const tournamentRedirectURL = "<%=redirectURL%>";
    document.addEventListener('DOMContentLoaded', function() {
      function addDay(str) {
        /*let x = str.split("-");
        let day = parseInt(x[2], 10);
        day++;
        let final = x[0] + "-" + x[1] + "-" + day;
        return final;*/
      }

      let dbEvents = [];
      axios.get("api/tournaments/calendar")
        .then(function(result) {
          console.log(result);
          let i = 0;
          while (i < result.data.length) {
            let tData = result.data[i];
            let tournamentEventAppendable = {
              title: (tData.tournamentName + " Tournament"),
              start: tData.startDate,
              end: dayjs(tData.endDate).add(1, 'day').format('YYYY-MM-DD'),
              backgroundColor: "RoyalBlue",
              allDay: true,
              display: 'auto',
              url: (tournamentRedirectURL + tData.tournamentId)
            };

            let tournamentRegDeadlineAppendable = {
              title: (tData.tournamentName + " Signups Due"),
              start: tData.internalSignupDeadline,
              end: tData.internalSignupDeadline,
              backgroundColor: "FireBrick",
              allDay: true,
              display: 'auto',
              url: (tournamentRedirectURL + tData.tournamentId)
            };

            let tournamentFeesFreezeAppendable = {
              title: (tData.tournamentName + " Fees Freeze"),
              start: tData.feesFreeze,
              end: tData.feesFreeze,
              backgroundColor: "LightCoral",
              allDay: true,
              display: 'auto',
              url: (tournamentRedirectURL + tData.tournamentId)
            };

            dbEvents.push(tournamentEventAppendable);
            dbEvents.push(tournamentRegDeadlineAppendable);
            dbEvents.push(tournamentFeesFreezeAppendable);
            
            i++;
          }

          console.log("the events array is:");
          console.log(dbEvents);
          var calendarEl = document.getElementById('calendar');

          var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events: dbEvents,
            height: 800
          });
          console.log("made calendar object")

          calendar.render();

          console.log(calendar.getEvents())
        });

    });
  </script>

</body>

<%- include("../partials/footer.ejs") %>

</html>
