const HR_LENGTH = 40;
const MIN_LENGTH = 60;
const SEC_LENGTH = 80;

document.addEventListener("DOMContentLoaded", function () {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");

  const centerX = parseInt(canvas.width / 2);
  const centerY = parseInt(canvas.height / 2);

  function drawClock() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the clock face
    ctx.beginPath();
    ctx.arc(
      centerX,
      centerY,
      parseInt(canvas.width / 2) - 1,
      0,
      Math.PI * 2,
      true
    );
    ctx.stroke();

    // Get the current time
    const now = new Date();
    const seconds = now.getSeconds();
    const minutes = now.getMinutes();
    const hours = now.getHours();

    // Draw the second hand
    ctx.save();
    ctx.lineWidth = 4;
    ctx.strokeStyle = "black";
    ctx.translate(centerX, centerY);
    ctx.rotate((seconds / 60) * 2 * Math.PI);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -SEC_LENGTH);
    ctx.stroke();
    ctx.restore();

    // Draw the minute hand
    ctx.save();
    ctx.lineWidth = 3;
    ctx.strokeStyle = "cyan";
    ctx.translate(centerX, centerY);
    ctx.rotate((minutes / 60 + seconds / 3600) * 2 * Math.PI);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -MIN_LENGTH);
    ctx.stroke();
    ctx.restore();

    // Draw the hour hand
    ctx.save();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "yellow";
    ctx.translate(centerX, centerY);
    ctx.rotate(((hours % 12) / 12 + minutes / 720) * 2 * Math.PI);
    ctx.moveTo(0, 0);
    ctx.lineTo(0, -HR_LENGTH);
    ctx.stroke();
    ctx.restore();
  }

  drawClock(); // Initial call to draw the clock immediately

  const clock = document.getElementById("clock");
  const secHand = document.getElementById("secHand");
  const minHand = document.getElementById("minHand");
  const hrHand = document.getElementById("hrHand");

  const centerTransform = "translate(-50%, -50%)";

  function rotateHands() {
    const date = new Date();
    const seconds = date.getSeconds();
    const minutes = date.getMinutes();
    const hours = parseInt(date.getHours() % 12);

    secHand.style.transform = [
      centerTransform,
      `rotate(${(seconds - 15) * 6}deg)`
    ].join(" ");
    minHand.style.transform = [
      centerTransform,
      `rotate(${(minutes - 15) * 6}deg)`
    ].join(" ");
    hrHand.style.transform = [
      centerTransform,
      `rotate(${(hours - 3) * 30}deg)`
    ].join(" ");
  }

  setInterval(() => {
    drawClock();
    rotateHands();
  }, 1000);

  rotateHands();
});