"use client";

import { SpringEasingToggle } from "./index";

export interface DemoProps {
  bounce?: number;
  duration?: number;
  accent?: string;
  showCurve?: boolean;
  spin?: boolean;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ bounce = 0.4, duration = 0.6, accent = "#38BDF8", showCurve = true, spin = true }: DemoProps) {
  return (
    <div className="flex w-full items-center justify-center">
      <SpringEasingToggle bounce={bounce} duration={duration} accent={accent} showCurve={showCurve} spin={spin} />
    </div>
  );
}

1d:T19f6, 1e:T17235,

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

const props = withDefaults(
  defineProps<{
    bounce?: number;
    duration?: number;
    accent?: string;
    showCurve?: boolean;
    spin?: boolean;
  }>(),
  { bounce: 0.4, duration: 0.6, accent: "#38BDF8", showCurve: true, spin: true },
);

const STOPS = 32;
const SETTLE_BY = 4.6; // -ln(0.01): the envelope is ~1% of its start by the end of the sample window
const TILE = 72;
const TRACK_W = 280;
const TRAVEL = TRACK_W - TILE;
const PLOT_W = 120;
const PLOT_H = 72;
const PAD = 6;

interface Curve {
  samples: number[];
  domainMax: number;
  path: string;
}

function plotY(value: number, domainMax: number): number {
  const innerH = PLOT_H - PAD * 2;
  return PAD + innerH - (value / domainMax) * innerH;
}

function sampleSpring(bounce: number, count: number): number[] {
  const zeta = Math.min(1, Math.max(0.05, 1 - bounce));
  const w0 = SETTLE_BY / zeta;
  const out: number[] = [];
  for (let i = 0; i <= count; i++) {
    const t = i / count;
    if (zeta >= 1) {
      out.push(1 - Math.exp(-w0 * t) * (1 + w0 * t));
    } else {
      const wd = w0 * Math.sqrt(1 - zeta * zeta);
      out.push(1 - Math.exp(-zeta * w0 * t) * (Math.cos(wd * t) + ((zeta * w0) / wd) * Math.sin(wd * t)));
    }
  }
  out[0] = 0;
  out[count] = 1;
  return out;
}

function buildCurve(bounce: number): Curve {
  const samples = sampleSpring(bounce, STOPS);
  const domainMax = Math.max(1, ...samples);
  const innerW = PLOT_W - PAD * 2;
  const path = samples
    .map((v, i) => `${i === 0 ? "M" : "L"}${(PAD + (i / STOPS) * innerW).toFixed(2)},${plotY(v, domainMax).toFixed(2)}`)
    .join(" ");
  return { samples, domainMax, path };
}

function toEasing(samples: number[]): string {
  return `linear(${samples.map((v) => v.toFixed(4)).join(",")})`;
}

const atEnd = ref(false);
const reduce = ref(false);
let fired = false;
let timer: number | undefined;
let media: MediaQueryList | undefined;

function onMediaChange(event: MediaQueryListEvent) {
  reduce.value = event.matches;
}

onMounted(() => {
  media = window.matchMedia("(prefers-reduced-motion: reduce)");
  reduce.value = media.matches;
  media.addEventListener("change", onMediaChange);
  if (!reduce.value) {
    timer = window.setTimeout(() => {
      fired = true;
      atEnd.value = true;
    }, 700);
  }
});

onUnmounted(() => {
  if (timer) window.clearTimeout(timer);
  media?.removeEventListener("change", onMediaChange);
});

function toggle() {
  fired = true;
  atEnd.value = !atEnd.value;
}

const clampedBounce = computed(() => Math.min(0.9, Math.max(0, props.bounce)));
const clampedDuration = computed(() => Math.min(2, Math.max(0.2, props.duration)));
const curve = computed(() => buildCurve(clampedBounce.value));
const targetPx = computed(() => TRAVEL / curve.value.domainMax);
const ease = computed(() => (reduce.value ? "linear" : toEasing(curve.value.samples)));
const dur = computed(() => (reduce.value ? 0.15 : clampedDuration.value));
const tileTransform = computed(() =>
  atEnd.value ? `translateX(${targetPx.value.toFixed(2)}px) rotate(${props.spin ? 180 : 0}deg)` : "translateX(0px) rotate(0deg)",
);
const tileStyle = computed(() => ({
  background: props.accent,
  transform: tileTransform.value,
  transition: `transform ${dur.value}s ${ease.value}`,
}));

const dotRest = computed(() => plotY(0, curve.value.domainMax));
const dotDone = computed(() => plotY(1, curve.value.domainMax));
const dotStyle = computed(() =>
  reduce.value
    ? { left: `${PLOT_W - PAD}px`, top: `${dotDone.value}px`, transition: "none", background: props.accent }
    : {
        left: `${atEnd.value ? PLOT_W - PAD : PAD}px`,
        top: `${atEnd.value ? dotDone.value : dotRest.value}px`,
        transition: `left ${dur.value}s linear, top ${dur.value}s ${ease.value}`,
        background: props.accent,
      },
);
</script>

<template>
  <div class="spring-toggle">
    <div class="column">
      <div class="track" :style="{ width: `${TRACK_W}px`, height: `${TILE + 28}px` }">
        <span class="baseline" aria-hidden="true"></span>
        <div class="tile" :style="tileStyle" aria-hidden="true"></div>
      </div>
      <button type="button" class="trigger" :aria-pressed="atEnd" :style="{ background: accent, color: '#0B0D10' }" @click="toggle">
        {{ atEnd ? "Send back" : "Send" }}
      </button>
    </div>
    <div v-if="showCurve" class="plot" :style="{ width: `${PLOT_W}px`, height: `${PLOT_H}px` }">
      <svg aria-hidden="true" :width="PLOT_W" :height="PLOT_H" :viewBox="`0 0 ${PLOT_W} ${PLOT_H}`" class="plot-svg">
        <line :x1="PAD" :y1="dotRest" :x2="PLOT_W - PAD" :y2="dotRest" stroke="currentColor" stroke-opacity="0.14" stroke-width="1" />
        <line :x1="PAD" :y1="dotDone" :x2="PLOT_W - PAD" :y2="dotDone" stroke="currentColor" stroke-opacity="0.22" stroke-width="1" stroke-dasharray="2 3" />
        <path :d="curve.path" fill="none" :stroke="accent" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
      <div class="dot" :style="dotStyle" aria-hidden="true"></div>
    </div>
  </div>
</template>

<style scoped>
.spring-toggle {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2rem;
  padding: 1.5rem;
  color: inherit;
  font-family: system-ui, sans-serif;
}
.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.track {
  position: relative;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  background: color-mix(in srgb, currentColor 3%, transparent);
}
.baseline {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: color-mix(in srgb, currentColor 15%, transparent);
}
.tile {
  position: absolute;
  left: 0;
  top: 50%;
  width: 72px;
  height: 72px;
  margin-top: -36px;
  border-radius: 10px;
}
.trigger {
  border: none;
  border-radius: 6px;
  padding: 0.375rem 1rem;
  font: 600 13px/1.2 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: transform 150ms ease;
}
.trigger:active {
  transform: translateY(1px) scale(0.96);
}
.trigger:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 70%, transparent), 0 0 0 4px transparent;
}
.plot {
  position: relative;
  flex-shrink: 0;
}
.plot-svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
}
</style>

Nearby