"use client";

import { MagnifyingIconDock } from "./index";

export interface DemoProps {
  accentColor?: string;
  baseSize?: number;
  magnification?: number;
  iconCount?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#F5C542", baseSize = 40, magnification = 60, iconCount = 6 }: DemoProps) {
  return (
    <div className="flex min-h-[220px] w-full items-end justify-center p-8">
      <MagnifyingIconDock accentColor={accentColor} baseSize={baseSize} magnification={magnification} iconCount={iconCount} />
    </div>
  );
}

1d:T2549, 1e:T1bc86,

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

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    baseSize?: number;
    magnification?: number;
    iconCount?: number;
    autoplay?: boolean;
  }>(),
  { accentColor: "#F5C542", baseSize: 40, magnification: 60, iconCount: 6, autoplay: true },
);

interface Glyph {
  id: string;
  label: string;
  paths: string[];
  circles?: Array<[number, number, number]>;
}

const GLYPHS: Glyph[] = [
  { id: "mail", label: "Mail", paths: ["M4 6h16v12H4z", "M4 6l8 7 8-7"] },
  {
    id: "chat",
    label: "Messages",
    paths: ["M5 5h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-9l-4 3v-3H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"],
  },
  { id: "calendar", label: "Calendar", paths: ["M4 5h16v15H4z", "M4 10h16", "M8 3v4", "M16 3v4"] },
  { id: "camera", label: "Camera", paths: ["M4 8h3l2-3h6l2 3h3v10H4z"], circles: [[12, 13, 3.4]] },
  {
    id: "music",
    label: "Music",
    paths: ["M9 18V5l10-2v13"],
    circles: [
      [7, 18, 2.2],
      [17, 16, 2.2],
    ],
  },
  { id: "map", label: "Maps", paths: ["M12 21s7-6.4 7-11.5A7 7 0 1 0 5 9.5C5 14.6 12 21 12 21z"], circles: [[12, 9.5, 2.3]] },
  { id: "photos", label: "Photos", paths: ["M3 4h18v16H3z", "M4 17l5-5 4 4 3-3 4 4"], circles: [[8.5, 9, 1.6]] },
  { id: "compass", label: "Compass", paths: ["M14.6 9.4l-2.1 5.2-5.2 2.1 2.1-5.2z"], circles: [[12, 12, 9]] },
  { id: "clock", label: "Clock", paths: ["M12 7v5l3.5 2"], circles: [[12, 12, 9]] },
  {
    id: "heart",
    label: "Favorites",
    paths: ["M12 20s-7.2-4.4-9.6-8.6C.7 8 3.1 4 7 4c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.9 0 6.3 4 4.6 7.4C19.2 15.6 12 20 12 20z"],
  },
];

type RGB = [number, number, number];
const NEUTRAL: RGB = [235, 238, 244];

function hexToRgb(hex: string): RGB {
  const n = Number.parseInt(hex.replace("#", ""), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
function mixRgb(a: RGB, b: RGB, t: number): RGB {
  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
}
function rgba([r, g, b]: RGB, alpha: number): string {
  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha.toFixed(3)})`;
}

const glyphs = computed(() => GLYPHS.slice(0, Math.min(Math.max(props.iconCount, 4), GLYPHS.length)));
const accentRgb = computed(() => hexToRgb(props.accentColor));

const containerEl = ref<HTMLElement | null>(null);
const itemEls = ref<Array<HTMLButtonElement | null>>([]);
const pointerX = ref<number | null>(null);
const focusedIndex = ref<number | null>(null);
const activeIndex = ref(Math.min(1, glyphs.value.length - 1));
const rovingIndex = ref(0);
const metrics = ref<Array<{ size: number; near: number }>>(glyphs.value.map(() => ({ size: props.baseSize, near: 0 })));

let sweepFrame = 0;
let sweepCancelled = false;

function setItemRef(el: Element | null, index: number) {
  itemEls.value[index] = el as HTMLButtonElement | null;
}

function recompute() {
  const container = containerEl.value;
  if (!container) return;
  const bounds = container.getBoundingClientRect();
  const range = props.baseSize * 1.6 + props.magnification * 0.5;
  metrics.value = glyphs.value.map((_, index) => {
    if (focusedIndex.value === index) return { size: props.baseSize + props.magnification, near: 1 };
    if (pointerX.value == null) return { size: props.baseSize, near: 0 };
    const el = itemEls.value[index];
    if (!el) return { size: props.baseSize, near: 0 };
    const rect = el.getBoundingClientRect();
    const center = rect.left + rect.width / 2 - bounds.left;
    const distance = Math.abs(pointerX.value - center);
    const t = Math.max(0, 1 - distance / range);
    const eased = t * t * (3 - 2 * t);
    return { size: props.baseSize + props.magnification * eased, near: eased };
  });
}

watch([pointerX, focusedIndex, glyphs, () => props.baseSize, () => props.magnification], recompute, { immediate: true });

watch(glyphs, (list) => {
  if (activeIndex.value > list.length - 1) activeIndex.value = Math.max(0, list.length - 1);
  if (rovingIndex.value > list.length - 1) rovingIndex.value = Math.max(0, list.length - 1);
});

function stopSweep() {
  sweepCancelled = true;
  if (sweepFrame) cancelAnimationFrame(sweepFrame);
}

function runSweep() {
  const container = containerEl.value;
  const reduceMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (!container || reduceMotion || !props.autoplay) return;
  const bounds = container.getBoundingClientRect();
  const range = props.baseSize * 1.6 + props.magnification * 0.5;
  const from = -range * 0.6;
  const to = bounds.width + range * 0.6;
  const delay = 450;
  const duration = 1900;
  const started = performance.now();
  sweepCancelled = false;
  const step = (now: number) => {
    if (sweepCancelled) return;
    const elapsed = now - started - delay;
    if (elapsed < 0) {
      sweepFrame = requestAnimationFrame(step);
      return;
    }
    const t = Math.min(1, elapsed / duration);
    const eased = t * t * (3 - 2 * t);
    pointerX.value = from + (to - from) * eased;
    if (t < 1) {
      sweepFrame = requestAnimationFrame(step);
    } else {
      pointerX.value = null;
    }
  };
  sweepFrame = requestAnimationFrame(step);
}

onMounted(runSweep);
onBeforeUnmount(stopSweep);

function handlePointerMove(event: PointerEvent) {
  stopSweep();
  const bounds = containerEl.value?.getBoundingClientRect();
  if (!bounds) return;
  pointerX.value = event.clientX - bounds.left;
}
function handlePointerLeave() {
  stopSweep();
  pointerX.value = null;
}
function handleFocus(index: number) {
  focusedIndex.value = index;
  rovingIndex.value = index;
}
function handleBlur(index: number) {
  if (focusedIndex.value === index) focusedIndex.value = null;
}
function handleClick(index: number) {
  activeIndex.value = index;
  rovingIndex.value = index;
}
function focusItem(index: number) {
  rovingIndex.value = index;
  itemEls.value[index]?.focus();
}
function handleKeydown(event: KeyboardEvent) {
  if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
  event.preventDefault();
  const count = glyphs.value.length;
  const last = count - 1;
  const next =
    event.key === "Home"
      ? 0
      : event.key === "End"
        ? last
        : event.key === "ArrowLeft"
          ? (rovingIndex.value - 1 + count) % count
          : (rovingIndex.value + 1) % count;
  focusItem(next);
}
function tint(near: number) {
  return mixRgb(NEUTRAL, accentRgb.value, near * 0.85);
}
</script>

<template>
  <div class="dock-wrap">
    <div
      ref="containerEl"
      role="toolbar"
      aria-label="Application dock"
      aria-orientation="horizontal"
      class="dock"
      :style="{ minHeight: baseSize + magnification * 0.6 + 'px' }"
      @pointermove="handlePointerMove"
      @pointerleave="handlePointerLeave"
      @keydown="handleKeydown"
    >
      <button
        v-for="(glyph, index) in glyphs"
        :key="glyph.id"
        :ref="(el) => setItemRef(el as Element | null, index)"
        type="button"
        class="dock-icon"
        :tabindex="index === rovingIndex ? 0 : -1"
        :aria-label="glyph.label"
        :aria-pressed="index === activeIndex"
        :style="{
          width: (metrics[index]?.size ?? baseSize) + 'px',
          height: (metrics[index]?.size ?? baseSize) + 'px',
          borderRadius: Math.round((metrics[index]?.size ?? baseSize) * 0.28) + 'px',
          backgroundColor: rgba(tint(metrics[index]?.near ?? 0), 0.08 + 0.14 * (metrics[index]?.near ?? 0)),
          borderColor: rgba(tint(metrics[index]?.near ?? 0), 0.16 + 0.3 * (metrics[index]?.near ?? 0)),
        }"
        @focus="handleFocus(index)"
        @blur="handleBlur(index)"
        @click="handleClick(index)"
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="dock-icon__svg">
          <path v-for="(d, i) in glyph.paths" :key="'p' + i" :d="d" />
          <circle v-for="(c, i) in glyph.circles ?? []" :key="'c' + i" :cx="c[0]" :cy="c[1]" :r="c[2]" />
        </svg>
        <span
          v-if="index === activeIndex"
          class="dock-icon__dot"
          aria-hidden="true"
          :style="{ background: accentColor, boxShadow: `0 0 8px ${accentColor}` }"
        />
      </button>
    </div>
  </div>
</template>

<style scoped>
.dock-wrap {
  display: flex;
  width: 100%;
  align-items: flex-end;
  justify-content: center;
}
.dock {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  border-radius: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.06);
  padding: 1rem 1rem 0.75rem;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.06),
    0 12px 20px -16px rgb(0 0 0 / 0.7);
}
.dock-icon {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: rgb(255 255 255 / 0.85);
  cursor: pointer;
  outline: none;
  transition:
    width 260ms cubic-bezier(0.34, 1.4, 0.4, 1),
    height 260ms cubic-bezier(0.34, 1.4, 0.4, 1);
}
.dock-icon:focus-visible {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.7);
}
.dock-icon__svg {
  width: 60%;
  height: 60%;
}
.dock-icon__dot {
  position: absolute;
  bottom: -0.5rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
}
@media (prefers-reduced-motion: reduce) {
  .dock-icon {
    transition: none;
  }
}
</style>

Nearby