{% extends "qommon/forms/widget.html" %}
{% block widget-content %}
  <div class="debug">

  </div>
  <div class="reset">
    <p class="button-reset">Réinitialiser</p>
  </div>
  <div class="month-calendar">
    <h3></h3>
    <div id="imio-wrapper-arrow-mounth">
      <a id="imio-previous-mounth" class="imio-arrow left-arrow">&#10094;</a>
      <a id="imio-next-mounth" class="imio-arrow right-arrow">&#10095;</a>
    </div>
    <div class="days"></div>
  </div>

  <script type="text/javascript" defer>
    (function () {
      // variables pour le swipe
      let touchStartX = null;
      let touchStartY = null;
      // id des différentes liste à chercher dans le formulaire
      const idDayList = "var_jours_disponible"
      const idHourList = "var_heures_disponible"
      const idListBookingBy = "var_jour_heure"
      // variables du formulaire récupérées
      const minDays = "{{ form.option.min_days|escapejs }}";
      const maxDays = "{{ form.option.max_days|escapejs }}";
      const optionHourDay = "{{ form.option.selection_par.raw }}";
      let hourDay = "{{ form.var.jour_heure.raw }}";
      hourDay = hourDay === "None" ? optionHourDay : hourDay;
      // date du jour à 00:00
      const now = new Date()
      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
      // début et fin du créneau
      const startDate = addDaysToDate(today, Number(minDays));
      const endDate = addDaysToDate(today, Number(maxDays));
      // mois repérés en index absolu (année*12 + mois) pour gérer le passage d'une année à l'autre
      const startMonth = startDate.getFullYear() * 12 + startDate.getMonth();
      const endMonth = endDate.getFullYear() * 12 + endDate.getMonth();
      let month = startMonth;
      // Récupération des éléments html implentés d'avance dans le template
      const monthArrows = document.querySelectorAll("#imio-wrapper-arrow-mounth .imio-arrow")
      let debug = document.querySelector('.debug');
      const reset = document.querySelector('.reset');
      const resetButton = reset.querySelector('.button-reset');
      let monthCalendar = document.querySelector('.month-calendar .days')
      let h3Month = document.querySelector('.month-calendar h3');
      // Récupération des ids des listes
      let checkboxesId = function (idList) {
        return document.getElementById(idList).getAttribute("data-widget-name")
      }

      const radioListHourDay = () => {
        try {
          return document.querySelectorAll(`#${idListBookingBy} input[type="radio"]`);
        } catch {
          return [];
        }
      }

      // Ajouter des jours à une date
      function addDaysToDate(date, number) {
        const newDate = new Date(date);
        return new Date(newDate.setDate(newDate.getDate() + number));
      }

      // Obtenir la date en version ISO String
      const dateISOString = (date) => new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString()

      // Ajouter un jour dans le calendrier
      function addDaysInCalendar(date, classList) {
        let day = document.createElement("div");
        for (let i = 0; i < classList.length; i++) {
          day.classList.add(classList[i]);
        }
        let title = document.createElement("h4");
        title.innerText = date.toLocaleDateString("fr-BE", {weekday: 'long'}) + " " + date.getDate();
        day.appendChild(title);
        return day;
      }

      // Obtenir le nombre de jour d'un mois
      const numDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
      // Vérification si les inputs d'une liste sont checked
      const inputChecked = (idList) => Array.from(document.getElementById(idList).querySelectorAll("input")).filter(input => input.checked);
      const isIdChoiceInInputCheckedName = (idChoice, idList) => inputChecked(idList).map(i => i.name.split("$element")[1] === idChoice).includes(true);

      // toggle une checkbox
      function checkUncheck(index, idList) {
        const elementName = checkboxesId(idList) + "$element" + index;
        const linkedElement = document.getElementsByName(elementName)[0];
        linkedElement.checked = !linkedElement.checked;
      }

      function checkHours(idItem, idList) {
        const elementName = checkboxesId(idList) + "$element" + idItem;
        const linkedElement = document.getElementsByName(elementName)[0];
        linkedElement.checked = true;
      }


      // Création de d'une div month
      function createMonth(month, bookBy) {
        const firstDayInMonth = new Date(Math.floor(month / 12), month % 12, 1);
        const daysInMonth = numDaysInMonth(firstDayInMonth.getFullYear(), firstDayInMonth.getMonth());
        h3Month.innerText = firstDayInMonth.toLocaleString("fr-BE", {
          month: 'long',
          year: 'numeric'
        }).toUpperCase();

        function createChoice(idChoice, bookBy) {
          function createChoiceByDay(idChoice) {
            let el = document.createElement("p");
            el.classList.add("choice");
            if (isIdChoiceInInputCheckedName(idChoice, idDayList)) {
              el.innerText = "Réservé";
              el.classList.add("selected");
            } else {
              el.innerText = "Libre";
            }
            el.id = idChoice
            return el;
          }

          function createChoiceByHour(idChoice) {
            const numericHour = idChoice.split("T")[1].slice(0, 5);
            let div = document.createElement("div");
            let pNumericHour = document.createElement("p");
            pNumericHour.innerText = numericHour;

            pNumericHour.classList.add("numeric-hour");
            // let statusBooking = document.createElement("p");
            // statusBooking.classList.add("status");
            div.classList.add("choice");
            div.classList.add("hour")

            if (isIdChoiceInInputCheckedName(idChoice, idHourList)) {
              // statusBooking.innerText = "Réservé";
              div.classList.add("selected");
            } else {
              // statusBooking.innerText = "Libre";
            }
            div.appendChild(pNumericHour)
            // div.appendChild(statusBooking)
            div.id = idChoice
            return div;
          }

          if (bookBy === "jours") {
            return createChoiceByDay(idChoice)
          }
          if (bookBy === "heures") {
            return createChoiceByHour(idChoice)
          }
        }

        // Add previous month days
        const dayOfPreviousWeek = firstDayInMonth.getDay() === 0 ? 7 : firstDayInMonth.getDay();
        let previousMonthDates = [];
        for (let i = 1; i <= dayOfPreviousWeek - 1; i++) {
          let date = new Date(firstDayInMonth.getFullYear(), firstDayInMonth.getMonth(), 1 - i);
          previousMonthDates.push(date)
        }
        previousMonthDates = previousMonthDates.reverse()
        for (let i = 0; i < previousMonthDates.length; i++) {
          let day = addDaysInCalendar(previousMonthDates[i], ["day", "inactive", "previous-month"]);
          monthCalendar.appendChild(day);
        }

        // Add selected month days
        for (let i = 1; i <= daysInMonth; i++) {
          let date = new Date(firstDayInMonth.getFullYear(), firstDayInMonth.getMonth(), i);
          let day = addDaysInCalendar(date, ["day"]);
          if (startDate <= date && date <= endDate) {
            // ajouter les choix (jours dispo) pour chaque jour
            if (bookBy === "jours") {
              const idChoice = dateISOString(date).split("T")[0];
              const choice = createChoice(idChoice, bookBy);
              day.appendChild(choice);
            }
            // ajouter les heures dispo à chaque hour
            if (bookBy === "heures") {
              for (let hour = 0; hour < 24; hour++) {
                datetime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hour, 0)
                const idChoice = dateISOString(datetime).slice(0, 16)
                const choice = createChoice(idChoice, bookBy)
                day.appendChild(choice)
              }
            }

          } else {
            day.classList.add("inactive");
          }
          monthCalendar.appendChild(day);


          // Add next month days
          if (i === daysInMonth) {
            const lastDayInMonth = new Date(date.getFullYear(), date.getMonth(), i);
            const dayOfNextWeek = lastDayInMonth.getDay() === 0 ? 7 : lastDayInMonth.getDay();
            for (let j = 1; j <= 7 - dayOfNextWeek; j++) {
              date = new Date(lastDayInMonth.getFullYear(), lastDayInMonth.getMonth() + 1, j);
              let day = addDaysInCalendar(date, ["day", "inactive", "next-month"]);
              monthCalendar.appendChild(day);
            }
          }
        }

        // Ret...........
        let domChoices = document.querySelectorAll(".choice");
        for (let choiceIndex = 0; choiceIndex < domChoices.length; choiceIndex++) {
          const choiceItemCalendar = domChoices[choiceIndex]
          if (bookBy === "jours") {
            // Si l'entrée est disablée, on ajoute la classe occupied à la div day
            if (document.getElementsByName(checkboxesId(idDayList) + "$element" + choiceItemCalendar.id)[0].disabled) {
              choiceItemCalendar.innerText = "Occupé";
              choiceItemCalendar.closest("div").classList.add('occupied');
            }
            if (!choiceItemCalendar.closest("div").classList.contains("occupied")) {
              choiceItemCalendar.addEventListener('click', function (e) {
                let selected = this.parentNode.querySelector('.selected')
                if (this.isSameNode(selected)) {
                  this.classList.remove('selected');
                  choiceItemCalendar.innerText = "Libre";
                } else {
                  this.classList.add('selected');
                  choiceItemCalendar.innerText = "Réservé";
                }
                checkUncheck(this.id, idDayList);
              })
            }
          }
          if (bookBy === "heures") {
            // let statusBooking = choiceItemCalendar.querySelector(".status")
            isDisabled = document.getElementsByName(checkboxesId(idHourList) + "$element" + choiceItemCalendar.id)[0].disabled
            if (isDisabled) {
              // statusBooking.innerText = "Occupé";
              choiceItemCalendar.classList.add('occupied');
            }
            if (!choiceItemCalendar.classList.contains("occupied")) {
              choiceItemCalendar.addEventListener('click', function (e) {
                // let selected = this.parentNode.querySelector('.selected')
                if (this.classList.contains('selected')) {
                  this.classList.remove('selected');
                  this.classList.remove('last-selected');
                  checkUncheck(this.id, idHourList);
                  // choiceItemCalendar.innerText = "Libre";
                } else {
                  last_selected = this.parentNode.querySelector('.last-selected')
                  this.classList.add('selected');
                  this.classList.add('last-selected');
                  if (e.shiftKey && last_selected) {
                    let indexLastSelected = Array.from(this.parentNode.children).indexOf(last_selected)
                    let indexCurrentSelected = Array.from(this.parentNode.children).indexOf(this)
                    let start = Math.min(indexLastSelected, indexCurrentSelected)
                    let end = Math.max(indexLastSelected, indexCurrentSelected)
                    for (let i = start; i <= end; i++) {
                      if (!this.parentNode.children[i].classList.contains('occupied') && i !== indexLastSelected) {
                        this.parentNode.children[i].classList.add('selected');
                        checkUncheck(this.parentNode.children[i].id, idHourList);
                      }
                    }
                  }
                  if (last_selected) {
                    last_selected.classList.remove('last-selected');
                  }
                  // choiceItemCalendar.innerText = "Réservé";
                }
                selectedItems = this.parentNode.querySelectorAll('.selected')
                selectedItems.forEach((element) => checkHours(element.id, idHourList))
              })
            }
          }
        }
      }

      for (let i = 0; i < monthArrows.length; i++) {
        monthArrows[i].addEventListener('click', function (e) {
          if (this.classList.contains("left-arrow") && month > startMonth) {
            month = month - 1;
            removeCreateMonth(month);
          }
          if (this.classList.contains("right-arrow") && month < endMonth) {
            month = month + 1;
            removeCreateMonth(month);
          }
        })
      }

      for (let i = 0; i < radioListHourDay().length; i++) {
        radioListHourDay()[i].addEventListener('click', function (e) {
          hourDay = this.value;
          removeCreateMonth(month);
        })
      }

      createMonth(month, hourDay);

      function resetCalendar() {
        document.querySelectorAll("input[type='checkbox']").forEach(checkbox => checkbox.checked = false);
        month = startMonth;
        removeCreateMonth(month);
      }

      resetButton.addEventListener('click', resetCalendar);

      function removeCreateMonth(month) {
        document.querySelectorAll(".day").forEach(day => day.remove());
        createMonth(month, hourDay);
      }

      // function and event listener for swipe
      if (window.screen.width <= 960) {
        document.addEventListener('touchstart', handleTouchStart, false);
        document.addEventListener('touchend', handleTouchMove, false);
      }

      function getTouches(e) {
        return e.touches ||             // browser API
        e.originalEvent.touches; // jQuery
      }

      function handleTouchStart(e) {
        const firstTouch = getTouches(e)[0];
        touchStartX = firstTouch.clientX;
        touchStartY = firstTouch.clientY;
      };

      function handleTouchMove(e) {
        if (!touchStartX || !touchStartY) {
          return;
        }
        let touchEndX = e.changedTouches[0].clientX;
        let touchEndY = e.changedTouches[0].clientY;

        let xDiff = touchStartX - touchEndX;
        let yDiff = touchStartY - touchEndY;
        let xDiffAbs = Math.abs(xDiff);
        let yDiffAbs = Math.abs(yDiff);

        if (xDiffAbs > yDiffAbs) {
          if (xDiff > 0 && month < endMonth) {
            // right swipe
            month = month + 1;
            removeCreateMonth(month);
          }
          if (xDiff < 0 && month > startMonth) {
            // left swipe
            month = month - 1;
            removeCreateMonth(month);
          }
          // reset values
          touchStartX = null;
          touchStartY = null;
        }
      };
    })();
  </script>
  <style>
    #imio-wrapper-arrow-mounth {
      text-align: center;
      margin-bottom: 0.5em;
    }

    #imio-wrapper-arrow-mounth .imio-arrow {
      cursor: pointer;
      text-decoration: none;
      font-weight: bold;
      font-size: xx-large;
      margin: 0 4em;
    }

    .month-calendar {
      width: 60em;
    }

    .month-calendar h3 {
      text-align: center !important;
      margin: 3em 0 0 0;
    }

    .month-calendar .days {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .month-calendar .day {
      margin: 0;
      width: 8.5em;
      box-sizing: border-box;
      border: 1px solid #fff;
      background-color: #EEE;
    }

    .month-calendar .day.inactive {
      background: repeating-linear-gradient(55deg, #EEE 0 4px, darkgray 4px 8px);
    }

    .month-calendar .day.previous-month,
    .month-calendar .day.next-month {
      visibility: hidden;
    }

    .month-calendar .days h4 {
      text-align: center;
      font-weight: bold;
      margin: 0;
      text-transform: capitalize;
      padding: 1ex 0;
    }

    .month-calendar .day .choice {
      text-align: center;
      max-width: 95%;
      margin: 2ex auto;
      border-radius: 0.5em;
      cursor: pointer;
      font-weight: bold;
      padding: 1ex 0;
    }

    .reset .button-reset {
      text-align: center;
      border-radius: 0.5em;
      cursor: pointer;
      font-weight: bold;
      padding: 1ex 0;
      max-width: 7.5em;
    }

    .month-calendar .day .choice:first-letter {
      text-transform: capitalize;
    }

    .month-calendar .day.inactive h4 {
      background-color: grey;
    }

    .month-calendar .day.occupied h4 {
      background-color: grey;
    }

    .month-calendar .day.occupied {
      background: repeating-linear-gradient(55deg, #EEE 0 4px, darkgray 4px 8px);
    }

    .month-calendar .day.occupied .choice {
      background-color: grey;
      color: white;
      border: 1px solid grey;
    }

    .month-calendar .day.occupied .choice:not(.selected) {
      background-color: white;
      color: grey;
      border: 1px solid grey;
    }

    .month-calendar .day .choice.hour {
      max-width: 100%;
      border-radius: 0;
      padding: 0;
      margin: 0;
    }

    .month-calendar .day .choice.hour.occupied {
      background: repeating-linear-gradient(55deg, #EEE 0 4px, darkgray 4px 8px);
    }

    .month-calendar .day .choice.hour .numeric-hour {
      margin: -1px;
      font-size: smaller;
    }

    @media all and (max-device-width: 60em) {
      .month-calendar {
        width: 300px;
        margin: 0 auto;

      }

      .month-calendar .day {
        width: 300px;
        justify-content: space-around;
        margin: 2ex auto;
        border-radius: 6px;
      }

      .month-calendar .day.inactive {
        display: none;
      }

      .month-calendar h3 {
        position: sticky;
        top: 0;
        background-color: white;
        padding: 20px;
      }

      #imio-wrapper-arrow-mounth {
        display: none;
      }
    }

  </style>
{% endblock %}