<script setup lang="ts">
const { onRender } = useScreen();
const { assets } = useAssets();

const app = useAppStore();
const store = useSettingsStore();
const tickClock = useClockTick();

const CENTER_X = 63;
const CENTER_Y = 95;

onRender((ctx) => {
  ctx.translate(0, -16 + store.notificationYOffset / 3);

  assets.images.home.topScreen.clock.draw(ctx, 13, 45);

  const now = new Date();
  tickClock(now);

  const renderHand = (
    value: number,
    color: string,
    length: number,
    width: number,
  ) => {
    const angle = value * Math.PI * 2 - Math.PI / 2;
    const endX = Math.round(CENTER_X + Math.cos(angle) * length);
    const endY = Math.round(CENTER_Y + Math.sin(angle) * length);
    ctx.fillStyle = color;
    drawLine(ctx, CENTER_X, CENTER_Y, endX, endY, width);
  };

  renderHand(now.getMinutes() / 60, "#797979", 30, 2);
  renderHand(
    now.getHours() / 12 + now.getMinutes() / 60 / 12,
    "#797979",
    23,
    2,
  );
  renderHand(now.getSeconds() / 60, app.color.hex, 35, 2);

  ctx.fillStyle = "#494949";
  ctx.fillRect(CENTER_X - 2, CENTER_Y - 2, 5, 5);
});

defineOptions({
  render: () => null,
});
</script>
