"use client";

import { InfiniteLoopPathLoader } from "./index";

export interface DemoProps {
  strokeWidth?: number;
  speed?: number;
  accent?: string;
  showTrack?: boolean;
  label?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  strokeWidth = 6,
  speed = 1,
  accent = "#FF4D8D",
  showTrack = true,
  label = "Syncing library",
}: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-10 p-8">
      <InfiniteLoopPathLoader strokeWidth={strokeWidth} speed={speed} accent={accent} showTrack={showTrack} label={label} />
      <InfiniteLoopPathLoader
        strokeWidth={strokeWidth}
        speed={speed}
        accent={accent}
        showTrack={showTrack}
        progress={0.62}
        label="Cache warm"
      />
    </div>
  );
}

1d:T13cd, 1e:Te5e9,

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    strokeWidth?: number;
    speed?: number;
    accent?: string;
    showTrack?: boolean;
    label?: string;
    progress?: number;
  }>(),
  {
    strokeWidth: 6,
    speed: 1,
    accent: "#FF4D8D",
    showTrack: true,
    label: "Syncing library",
    progress: undefined,
  },
);

const PATH_D = "M 80 50 C 80 20 44 20 44 50 C 44 80 80 80 80 50 C 80 20 116 20 116 50 C 116 80 80 80 80 50 Z";
const CYCLE_MS = 3400;
const GAP_FRACTION = 0.36;
const WARP_AMPLITUDE = 0.05;
const WARP_LOBES = 2;

function mod1(value: number) {
  const wrapped = value % 1;
  return wrapped < 0 ? wrapped + 1 : wrapped;
}
function warp(position: number) {
  const p = mod1(position);
  return mod1(p + WARP_AMPLITUDE * Math.sin(2 * Math.PI * WARP_LOBES * p));
}
/** Forward distance from tail to head along a 0-1 loop. Unlike mod1(head - tail), a full lap
 *  (head === tail + 1, e.g. a complete determinate fill) reports 1 rather than collapsing to 0. */
function loopSpan(headFrac: number, tailFrac: number) {
  const raw = headFrac - tailFrac;
  return raw >= 0 ? raw : raw + 1;
}

const labelId = `iloop-label-${Math.random().toString(36).slice(2, 9)}`;
const containerEl = ref<HTMLDivElement | null>(null);
const segmentEl = ref<SVGPathElement | null>(null);
const reducedMotion = ref(false);
const isDeterminate = computed(() => typeof props.progress === "number" && Number.isFinite(props.progress));
const clampedProgress = computed(() => Math.min(Math.max(props.progress ?? 0, 0), 1));

let length = 0;
let phase = 0;
let lastFrame: number | null = null;
let rafId = 0;
let visible = true;
let observer: IntersectionObserver | null = null;
let mediaQuery: MediaQueryList | null = null;

function paint(headFrac: number, tailFrac: number) {
  const segment = segmentEl.value;
  if (!segment || length <= 0) return;
  const segFrac = Math.max(loopSpan(headFrac, tailFrac), 0.01);
  const visibleLen = segFrac * length;
  segment.style.strokeDasharray = `${visibleLen} ${Math.max(length - visibleLen, 0)}`;
  segment.style.strokeDashoffset = `${-tailFrac * length}`;
}

function stopLoop() {
  if (rafId) cancelAnimationFrame(rafId);
  rafId = 0;
}

function startLoop() {
  stopLoop();
  lastFrame = null;
  const tick = (now: number) => {
    rafId = requestAnimationFrame(tick);
    const last = lastFrame ?? now;
    lastFrame = now;
    if (!visible) return;
    const dt = now - last;
    phase += (dt * props.speed) / CYCLE_MS;
    paint(warp(phase), warp(phase - GAP_FRACTION));
  };
  rafId = requestAnimationFrame(tick);
}

function syncMode() {
  stopLoop();
  if (isDeterminate.value) {
    paint(clampedProgress.value, 0);
  } else if (reducedMotion.value) {
    paint(GAP_FRACTION, 0);
  } else {
    startLoop();
  }
}

onMounted(() => {
  if (segmentEl.value) length = segmentEl.value.getTotalLength();

  mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
  reducedMotion.value = mediaQuery.matches;
  mediaQuery.addEventListener("change", (event) => {
    reducedMotion.value = event.matches;
    syncMode();
  });

  if (containerEl.value) {
    observer = new IntersectionObserver(([entry]) => {
      visible = entry.isIntersecting;
    }, { threshold: 0 });
    observer.observe(containerEl.value);
  }

  syncMode();
});

watch(() => props.progress, syncMode);

onBeforeUnmount(() => {
  stopLoop();
  observer?.disconnect();
});
</script>

<template>
  <div
    ref="containerEl"
    class="iloop"
    :aria-labelledby="label ? labelId : undefined"
    :role="isDeterminate ? 'progressbar' : 'status'"
    :aria-busy="isDeterminate ? undefined : true"
    :aria-valuemin="isDeterminate ? 0 : undefined"
    :aria-valuemax="isDeterminate ? 100 : undefined"
    :aria-valuenow="isDeterminate ? Math.round(clampedProgress * 100) : undefined"
  >
    <svg width="128" height="80" viewBox="0 0 160 100" fill="none" aria-hidden="true">
      <path
        v-if="showTrack"
        :d="PATH_D"
        :stroke="accent"
        :stroke-width="strokeWidth"
        stroke-linecap="round"
        stroke-linejoin="round"
        style="stroke-opacity: 0.16"
      />
      <path
        ref="segmentEl"
        :d="PATH_D"
        :stroke="accent"
        :stroke-width="strokeWidth"
        stroke-linecap="round"
        stroke-linejoin="round"
        :class="{ 'iloop__pulse': reducedMotion && !isDeterminate }"
      />
    </svg>
    <p v-if="label" :id="labelId" class="iloop__label">{{ label }}</p>
  </div>
</template>

<style scoped>
.iloop {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}
.iloop__label {
  margin: 0;
  user-select: none;
  font: 500 10px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: currentColor;
  opacity: 0.4;
}
.iloop__pulse {
  animation: iloop-pulse 2.2s ease-in-out infinite;
}
@keyframes iloop-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
</style>

Nearby