"use client";

import { LetterSwapCopyButton } from "./index";

export interface DemoProps {
  label?: string;
  doneLabel?: string;
  accent?: string;
  stagger?: number;
  resetMs?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Copy link", doneLabel = "Copied", accent = "#7C5CFF", stagger = 30, resetMs = 2000 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <LetterSwapCopyButton
        label={label}
        doneLabel={doneLabel}
        accent={accent}
        stagger={stagger}
        resetMs={resetMs}
        copyValue="https://example.com/invite/9F3K2L"
        autoDemoMs={5200}
      />
      <LetterSwapCopyButton
        label="Save draft"
        doneLabel="Saved"
        accent="#38BDF8"
        stagger={stagger}
        resetMs={resetMs}
        copyValue="https://example.com/drafts/night-rally-12"
      />
    </div>
  );
}

1d:T1a0b, 1e:T15ed8,

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

const props = withDefaults(
  defineProps<{
    label?: string;
    doneLabel?: string;
    accent?: string;
    stagger?: number;
    resetMs?: number;
    copyValue?: string;
    autoDemoMs?: number;
  }>(),
  {
    label: "Copy link",
    doneLabel: "Copied",
    accent: "#7C5CFF",
    stagger: 30,
    resetMs: 2000,
    copyValue: "https://example.com/invite/9F3K2L",
    autoDemoMs: undefined,
  },
);

const word = ref(props.label);
const prev = ref<string | null>(null);
const seq = ref(0);
const confirmed = ref(false);
const notice = ref("");

let resetTimer: number | undefined;
let autoTimer: number | undefined;

const chars = computed(() => Array.from(word.value));
const prevChars = computed(() => (prev.value ? Array.from(prev.value) : null));
const faceStyle = computed(() => ({
  "--accent": props.accent,
}));

function copyText(value: string) {
  if (typeof navigator !== "undefined" && navigator.clipboard) {
    navigator.clipboard.writeText(value).catch(() => {});
    return;
  }
  try {
    const trap = document.createElement("textarea");
    trap.value = value;
    trap.setAttribute("readonly", "");
    trap.style.position = "fixed";
    trap.style.opacity = "0";
    document.body.appendChild(trap);
    trap.select();
    document.execCommand("copy");
    trap.remove();
  } catch {
    /* clipboard unavailable */
  }
}

function roll(next: string, mark: boolean) {
  prev.value = word.value;
  word.value = next;
  seq.value += 1;
  confirmed.value = mark;
}

function confirm() {
  copyText(props.copyValue);
  notice.value = "Copied to clipboard";
  if (resetTimer !== undefined) window.clearTimeout(resetTimer);
  roll(props.doneLabel, true);
  resetTimer = window.setTimeout(() => {
    resetTimer = undefined;
    roll(props.label, false);
  }, props.resetMs);
}

function hover() {
  if (confirmed.value) return;
  prev.value = word.value;
  seq.value += 1;
}

if (props.autoDemoMs && typeof window !== "undefined") {
  autoTimer = window.setInterval(() => {
    if (resetTimer === undefined) confirm();
  }, props.autoDemoMs);
}

onBeforeUnmount(() => {
  if (resetTimer !== undefined) window.clearTimeout(resetTimer);
  if (autoTimer !== undefined) window.clearInterval(autoTimer);
});
</script>

<template>
  <button
    type="button"
    class="swap-copy"
    :class="{ 'is-confirmed': confirmed }"
    :style="faceStyle"
    @click="confirm"
    @mouseenter="hover"
  >
    <span class="swap-copy__live" aria-live="polite">{{ notice }}</span>
    <span class="swap-copy__word">
      <span
        v-for="(ch, i) in chars"
        :key="seq + '-' + i"
        class="swap-copy__letter"
        :style="{ '--d': i * stagger + 'ms' }"
      >
        <span v-if="prevChars && prevChars[i] !== undefined" class="swap-copy__out" aria-hidden="true">{{ prevChars[i] }}</span>
        <span class="swap-copy__in">{{ ch }}</span>
      </span>
    </span>
    <span class="swap-copy__chip" aria-hidden="true">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path class="swap-copy__icon-link" d="m13 7 1.5-1.5a3.5 3.5 0 0 1 5 5L18 12m-7 5-1.5 1.5a3.5 3.5 0 0 1-5-5L6 12m3.5 2.5 5-5" />
        <path class="swap-copy__icon-check" d="m6.5 12.5 3.6 3.6 7.4-8.1" pathLength="1" />
      </svg>
    </span>
  </button>
</template>

<style scoped>
.swap-copy {
  --accent: #7c5cff;
  --roll: 260ms;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 20px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 72%, white), var(--accent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--accent) 50%, white),
    0 4px 0 color-mix(in srgb, var(--accent) 45%, #10131a),
    0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  color: #fff;
  font: 700 25px/1 system-ui, sans-serif;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
  transition: transform 100ms ease;
}
.swap-copy:active {
  transform: translateY(2px);
}
.swap-copy:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.85);
  outline-offset: 3px;
}
.swap-copy__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.swap-copy__word {
  display: flex;
  overflow: hidden;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}
.swap-copy__letter {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 3px 0;
  margin: -3px 0;
  white-space: pre;
}
.swap-copy__in,
.swap-copy__out {
  display: inline-block;
  white-space: pre;
}
.swap-copy__in {
  animation: letter-in var(--roll) cubic-bezier(0.3, 0.7, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
.swap-copy__out {
  position: absolute;
  inset: 0;
  animation: letter-out var(--roll) cubic-bezier(0.3, 0.7, 0.3, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes letter-in {
  from {
    transform: translateY(150%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes letter-out {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-150%);
    opacity: 0;
  }
}
.swap-copy__chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  box-shadow:
    inset 0 -3px 5px rgb(11 13 16 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.8);
}
.swap-copy.is-confirmed .swap-copy__chip {
  animation: chip-thump 1s ease-in-out;
}
@keyframes chip-thump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.swap-copy__chip svg {
  stroke: var(--accent);
}
.swap-copy__icon-link {
  transition: opacity 180ms ease;
}
.swap-copy__icon-check {
  opacity: 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 300ms ease-out,
    opacity 150ms ease;
}
.swap-copy.is-confirmed .swap-copy__icon-link {
  opacity: 0;
}
.swap-copy.is-confirmed .swap-copy__icon-check {
  opacity: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .swap-copy__in {
    animation-name: letter-fade-in;
  }
  .swap-copy__out {
    animation-name: letter-fade-out;
  }
  .swap-copy.is-confirmed .swap-copy__chip {
    animation: none;
  }
  .swap-copy__icon-link,
  .swap-copy__icon-check {
    transition-duration: 1ms;
  }
}
@keyframes letter-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes letter-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>

Nearby