Hold to confirm

'use client';

import * as React from 'react';
import { HoldToConfirm } from './hold-to-confirm';

const LABELS = {
  idle: 'Hold to delete',
  holding: 'Keep holding',
  pending: 'Deleting',
  success: 'Deleted',
  error: 'Hold to try again',
};
const HOLD = 1100;

function TrashIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M2.7 4.2h10.6M6.2 4.2V3c0-.5.4-.9.9-.9h1.8c.5 0 .9.4.9.9v1.2M4 4.2l.6 8.5c.1.7.6 1.2 1.3 1.2h4.2c.7 0 1.2-.5 1.3-1.2l.6-8.5M6.7 7v4M9.3 7v4" />
    </svg>
  );
}

const pretendDelete = () => new Promise<void>((resolve) => window.setTimeout(resolve, 900));

export default function HoldToConfirmDemo({ replay = 0 }: { replay?: number }) {
  const area = React.useRef<HTMLDivElement>(null);

  // Replay starts over in Idle and holds Space for the full time.
  React.useEffect(() => {
    if (replay === 0) return;
    const button = area.current?.querySelector('button');
    if (!button) return;
    const key = (type: string) => button.dispatchEvent(new KeyboardEvent(type, { key: ' ', bubbles: true }));
    const timers = [
      window.setTimeout(() => key('keydown'), 400),
      window.setTimeout(() => key('keyup'), 400 + HOLD + 100),
    ];
    return () => {
      for (const timer of timers) window.clearTimeout(timer);
    };
  }, [replay]);

  return (
    <div
      ref={area}
      className="flex w-full max-w-[400px] flex-col items-start gap-4 rounded-xl border border-secondary bg-primary p-6 shadow-xs"
    >
      <div className="flex flex-col gap-1">
        <h3 className="text-md font-semibold text-primary">Delete project</h3>
        <p className="text-sm text-tertiary">
          This removes the project and all of its files. You cannot undo it.
        </p>
      </div>
      <HoldToConfirm
        key={replay}
        holdDuration={HOLD}
        labels={LABELS}
        icon={<TrashIcon />}
        onConfirm={pretendDelete}
      />
    </div>
  );
}