"use client";

import { MorphingIconToggle } from "./index";

export interface DemoProps {
  intervalSeconds?: number;
  colorOne?: string;
  colorTwo?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ intervalSeconds = 1, colorOne = "#FFD34D", colorTwo = "#FF4D8D" }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-10 p-8">
      <div className="flex flex-col items-center gap-2.5">
        <MorphingIconToggle intervalSeconds={intervalSeconds} colorOne={colorOne} colorTwo={colorTwo} />
        <span className="text-[11px] font-medium tracking-[0.14em] text-white/40 uppercase">Sync</span>
      </div>
      <div className="flex flex-col items-center gap-2.5">
        <MorphingIconToggle intervalSeconds={intervalSeconds} colorOne={colorOne} colorTwo={colorTwo} />
        <span className="text-[11px] font-medium tracking-[0.14em] text-white/40 uppercase">Build</span>
      </div>
    </div>
  );
}

1e:T13b4, 1f:T12d7d,

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

const props = withDefaults(
  defineProps<{
    intervalSeconds?: number;
    colorOne?: string;
    colorTwo?: string;
  }>(),
  { intervalSeconds: 1, colorOne: "#FFD34D", colorTwo: "#FF4D8D" },
);

const VB = 64;
const CENTER = VB / 2;
const POINTS = 14;
const MORPH_SECONDS = 0.42;
const REDUCED_MORPH_SECONDS = 0.08;

interface Pt {
  x: number;
  y: number;
}

function lobedShape(base: number, amp: number, lobes: number, phase: number): Pt[] {
  const pts: Pt[] = [];
  for (let i = 0; i < POINTS; i++) {
    const angle = (Math.PI * 2 * i) / POINTS - Math.PI / 2;
    const r = base + amp * Math.cos(lobes * angle + phase);
    pts.push({ x: CENTER + Math.cos(angle) * r, y: CENTER + Math.sin(angle) * r });
  }
  return pts;
}

const SHAPE_A = lobedShape(19, 6.5, 3, 0);
const SHAPE_B = lobedShape(18, 5, 5, Math.PI / 5);

function pathThrough(pts: Pt[]): string {
  const n = pts.length;
  const r = (v: number) => Math.round(v * 100) / 100;
  const d: string[] = [`M ${r(pts[0].x)} ${r(pts[0].y)}`];
  for (let i = 0; i < n; i++) {
    const p0 = pts[(i - 1 + n) % n];
    const p1 = pts[i];
    const p2 = pts[(i + 1) % n];
    const p3 = pts[(i + 2) % n];
    const c1x = p1.x + (p2.x - p0.x) / 6;
    const c1y = p1.y + (p2.y - p0.y) / 6;
    const c2x = p2.x - (p3.x - p1.x) / 6;
    const c2y = p2.y - (p3.y - p1.y) / 6;
    d.push(`C ${r(c1x)} ${r(c1y)} ${r(c2x)} ${r(c2y)} ${r(p2.x)} ${r(p2.y)}`);
  }
  d.push("Z");
  return d.join(" ");
}

function lerpPoints(from: Pt[], to: Pt[], t: number): Pt[] {
  return from.map((p, i) => ({ x: p.x + (to[i].x - p.x) * t, y: p.y + (to[i].y - p.y) * t }));
}

function hexToRgb(hex: string): [number, number, number] {
  const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex.trim());
  if (!m) return [255, 255, 255];
  return [parseInt(m[1], 16), parseInt(m[2], 16), parseInt(m[3], 16)];
}

function lerpColor(from: string, to: string, t: number): string {
  const [r1, g1, b1] = hexToRgb(from);
  const [r2, g2, b2] = hexToRgb(to);
  const r = Math.round(r1 + (r2 - r1) * t);
  const g = Math.round(g1 + (g2 - g1) * t);
  const b = Math.round(b1 + (b2 - b1) * t);
  return `rgb(${r}, ${g}, ${b})`;
}

/** Cubic ease matching the React port's [0.65, 0, 0.35, 1] bezier, sampled per animation frame. */
function easeInOutCubicLike(x: number): number {
  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
}

const reduce = typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;

const fromIndex = ref<0 | 1>(0);
const t = ref(0);

let rafId: number | null = null;
let timeoutId: ReturnType<typeof setTimeout> | null = null;
let cancelled = false;

function runMorph() {
  if (cancelled) return;
  const morphSeconds = reduce ? REDUCED_MORPH_SECONDS : MORPH_SECONDS;
  const start = performance.now();
  const durationMs = morphSeconds * 1000;
  const step = (now: number) => {
    if (cancelled) return;
    const raw = durationMs > 0 ? Math.min(1, (now - start) / durationMs) : 1;
    t.value = easeInOutCubicLike(raw);
    if (raw < 1) {
      rafId = requestAnimationFrame(step);
    } else {
      fromIndex.value = fromIndex.value === 0 ? 1 : 0;
      t.value = 0;
      timeoutId = setTimeout(runMorph, Math.max(0, props.intervalSeconds) * 1000);
    }
  };
  rafId = requestAnimationFrame(step);
}

function restart() {
  cancelled = false;
  if (timeoutId) clearTimeout(timeoutId);
  if (rafId) cancelAnimationFrame(rafId);
  timeoutId = setTimeout(runMorph, Math.max(0, props.intervalSeconds) * 1000);
}

onMounted(restart);
watch(() => props.intervalSeconds, restart);

onBeforeUnmount(() => {
  cancelled = true;
  if (timeoutId) clearTimeout(timeoutId);
  if (rafId) cancelAnimationFrame(rafId);
});

const sourceShape = computed(() => (fromIndex.value === 0 ? SHAPE_A : SHAPE_B));
const targetShape = computed(() => (fromIndex.value === 0 ? SHAPE_B : SHAPE_A));
const sourceColor = computed(() => (fromIndex.value === 0 ? props.colorOne : props.colorTwo));
const targetColor = computed(() => (fromIndex.value === 0 ? props.colorTwo : props.colorOne));

const d = computed(() => pathThrough(lerpPoints(sourceShape.value, targetShape.value, t.value)));
const fill = computed(() => lerpColor(sourceColor.value, targetColor.value, t.value));
</script>

<template>
  <div class="morph-icon-toggle">
    <svg :viewBox="`0 0 ${VB} ${VB}`" width="48" height="48" aria-hidden="true" class="morph-icon-toggle__svg">
      <path :d="d" :fill="fill" />
    </svg>
  </div>
</template>

<style scoped>
.morph-icon-toggle {
  position: relative;
  display: inline-flex;
  height: 6rem;
  width: 6rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.035);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06);
}
.morph-icon-toggle__svg {
  position: relative;
}
</style>

Nearby