class PhotoCalendar {
  dragOptions = {
    isDragging: false,
    lastZoom: 1,
    MAX_ZOOM: 5,
    MIN_ZOOM: 0.1,
    SCROLL_SENSITIVITY: 0.0005,
    startX: null,
    startY: null,
    x: null,
    y: null,
    dragging: false,
    mouseOver: false,
  };

  options = {
    calendarStartY: 690,
    divideMonths: false,
    fillStyle: "white",
    img: null,
    photoOffsetX: 0,
    photoOffsetY: 0,
    year: 2024,
    centerMonths: false,
  };

  constructor() {
    this.initControls();
    this.onYearChange();
  }

  overPhotoImg(x, y) {
    this.mouseOver = y >= 0 && y <= this.options.calendarStartY;
    return this.mouseOver;
  }
  getEventLocation(e) {
    if (e.touches && e.touches.length == 1) {
      return { x: e.touches[0].clientX, y: e.touches[0].clientY };
    } else if (e.clientX && e.clientY) {
      return { x: e.clientX, y: e.clientY };
    }
  }
  onPointerDown(e) {
    this.dragOptions.isDragging = true;
    let x = this.getEventLocation(e).x;
    let y = this.getEventLocation(e).y;

    if (this.overPhotoImg(x, y)) {
      this.dragOptions.x = x - this.options.photoOffsetX;
      this.dragOptions.y = y - this.options.photoOffsetY;
      this.renderPhoto();
      return;
    }

    this.dragOptions.x = x;
    this.dragOptions.y = y;
  }
  dragStop() {
    this.dragOptions.isDragging = false;
  }
  onPointerUp(e) {
    this.dragStop();
  }

  onPointerMove(e) {
    if (this.dragOptions.isDragging) {
      //      this.options.photoOffsetX = this.getEventLocation(e).x - this.dragOptions.x;
      this.options.photoOffsetY = this.getEventLocation(e).y - this.dragOptions.y;
      this.renderPhoto();
      return;
    }

    // mouse over
    let x = this.getEventLocation(e).x;
    let y = this.getEventLocation(e).y;
  }
  handleTouch(e, singleTouchHandler) {
    if (e.touches.length <= 1) {
      singleTouchHandler(e);

      if (e.type == "touchend") {
        e.preventDefault();
        this.dragOptions.mouseOver = false;
      }
    }
  
  
    if (e.type == "touchmove" && e.touches.length == 2)
    {
        this.dragStop();
    }
  }

  initControls() {
    const self = this;
    document.getElementById("year").addEventListener("change", (e) => {
      self.options.year = e.target.value;
      self.onYearChange();
    });
    document.getElementById("showMonthSeparators").addEventListener("click", (e) => {
      self.options.divideMonths = e.target.checked;
      self.onYearChange();
    });
    document.getElementById("centerMonths").addEventListener("click", (e) => {
      self.options.centerMonths = e.target.checked;
      self.onYearChange();
    });
    document.getElementById("imageInput").addEventListener("change", (e) => self.handleImageUpload(e));
    document.getElementById("downloadButton").addEventListener("click", (e) => self.downloadCanvas());

    const canvas = this.getCanvas();
    canvas.addEventListener("mousedown", (e) => self.onPointerDown(e));
    canvas.addEventListener("touchstart", (e) => self.handleTouch(e, (e) => self.onPointerDown(e)));
    canvas.addEventListener("mouseup", (e) => self.onPointerUp(e));
    canvas.addEventListener("touchend", (e) => self.handleTouch(e, (e) => self.onPointerUp(e)));
    canvas.addEventListener("mousemove", (e) => self.onPointerMove(e));
    canvas.addEventListener("touchmove", (e) => self.handleTouch(e, (e) => self.onPointerMove(e)));
  }

  handleImageUpload(event) {
    const self = this;
    const canvas = self.getCanvas();
    const ctx = canvas.getContext("2d");
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onload = function (e) {
      const img = new Image();
      img.onload = function () {
        self.options.img = img;
        self.renderPhoto();
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  }

  onYearChange() {
    const calendar = this.createCalendar(this.options.year);
    this.renderCalendar(calendar);
  }

  createCalendar(year) {
    const calendar = [];
    const daysInWeek = 7;
    const monthsInYear = 12;

    // Helper function to determine the number of days in a given month and year
    function getDaysInMonth(month, year) {
      return new Date(year, month + 1, 0).getDate();
    }

    // Helper function to get the day of the week (0 is Monday, 6 is Sunday)
    function getDayOfWeek(year, month, day) {
      const date = new Date(year, month, day);
      const dayOfWeek = date.getDay();
      return (dayOfWeek + 6) % 7; // Adjust so Monday is 0 and Sunday is 6
    }

    for (let month = 0; month < monthsInYear; month++) {
      const daysInMonth = getDaysInMonth(month, year);
      const monthArray = [];
      let weekArray = Array(daysInWeek).fill(null);

      for (let day = 1; day <= daysInMonth; day++) {
        const dayOfWeek = getDayOfWeek(year, month, day);
        weekArray[dayOfWeek] = day;
        if (dayOfWeek === 6 || day === daysInMonth) {
          // End of the week or month
          monthArray.push(weekArray);
          weekArray = Array(daysInWeek).fill(null);
        }
      }
      calendar.push(monthArray);
    }

    return calendar;
  }

  getCanvas() {
    const canvas = document.getElementById("calendarCanvas");
    return canvas;
  }

  renderPhoto() {
    const canvas = this.getCanvas();
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = this.options.fillStyle;
    ctx.fillRect(0, 0, canvas.width, this.options.calendarStartY - 1); // Clear canvas

    if (this.options.img == null) {
      return;
    }

    // Calculate the aspect ratio and new height
    const aspectRatio = this.options.img.width / this.options.img.height;
    const newWidth = canvas.width;
    const newHeight = newWidth / aspectRatio;

    ctx.save();
    ctx.beginPath();
    ctx.rect(0, 0, canvas.width, this.options.calendarStartY - 1);
    ctx.clip();
    ctx.drawImage(this.options.img, this.options.photoOffsetX, this.options.photoOffsetY, newWidth, newHeight);
    ctx.restore();
  }

  downloadCanvas() {
    const canvas = this.getCanvas();
    const link = document.createElement("a");
    link.href = canvas.toDataURL("image/png");
    link.download = "calendar.png";
    link.click();
  }

  renderCalendar(calendar) {
    const canvas = this.getCanvas();
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = this.options.fillStyle;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    this.renderPhoto();

    ctx.fillStyle = this.options.fillStyle;
    ctx.fillRect(0, this.options.calendarStartY, canvas.width, canvas.height);
    const monthWidth = canvas.width / 3;
    const monthHeigth = 30 + 30 * 8;
    for (let i = 0; i < 12; i++) {
      this.renderMonth(calendar, i, canvas, (i % 3) * monthWidth, parseInt(i / 3) * monthHeigth + this.options.calendarStartY, monthWidth);
    }
  }

  drawText(ctx, text, x, y) {
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.fillText(text, x, y);
  }

  drawTextCentered(ctx, text, x, y, cellWidth) {
    const centerX = x + cellWidth / 2;
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(text, centerX, y);
  }

  renderMonth(calendar, month, canvas, x, y, w) {
    const ctx = canvas.getContext("2d");
    const monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    const dayInitials = ["L", "M", "X", "J", "V", "S", "D"];
    const cellWidth = w / 8;
    const cellHeight = 30;
    const headerHeight = 30;

    if (this.options.divideMonths) {
      ctx.beginPath();
      ctx.rect(x, y, w, 30 + 30 * 8);
      ctx.stroke();
    }

    x += cellWidth / 2;
    y += headerHeight;

    // Clear the area where the month will be rendered
    ctx.fillStyle = this.options.fillStyle;
    ctx.fillRect(x, y, 7 * cellWidth, calendar[month].length * cellHeight + headerHeight * 2);

    // Draw the month name
    ctx.fillStyle = "black";
    ctx.font = "bold 28px Arial";
    if (this.options.centerMonths) {
      this.drawTextCentered(ctx, monthNames[month], x, y, cellWidth * 7);
    } else {
      this.drawText(ctx, monthNames[month], x + cellWidth / 3, y);
    }

    // Draw the day initials header
    ctx.font = "24px Arial";
    for (let i = 0; i < dayInitials.length; i++) {
      // ctx.fillText(dayInitials[i], x + i * cellWidth, y + headerHeight);
      this.drawTextCentered(ctx, dayInitials[i], x + i * cellWidth, y + headerHeight, cellWidth);
    }

    // Draw the days of the month
    ctx.font = "22px Arial";
    const monthData = calendar[month];
    for (let week = 0; week < monthData.length; week++) {
      for (let day = 0; day < monthData[week].length; day++) {
        const dayNumber = monthData[week][day];
        const dayText = dayNumber !== null ? dayNumber : "";

        // Set color to red for Saturday (5) and Sunday (6), else default color
        if (day === 5 || day === 6) {
          ctx.fillStyle = "red";
        } else {
          ctx.fillStyle = "black";
        }

        // ctx.fillText(dayText, x + day * cellWidth, y + headerHeight * 2 + week * cellHeight);
        this.drawTextCentered(ctx, dayText, x + day * cellWidth, y + headerHeight * 2 + week * cellHeight, cellWidth);
      }
    }
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const app = new PhotoCalendar();
});