Swipe actions

'use client';

import * as React from 'react';
import { type SwipeActionItem, SwipeActions, type SwipeActionsHandle } from './swipe-actions';

// Own line icons on a 20px grid; the component sets the stroke width for each size.
const PATHS = {
  archive: 'M3 4.5h14v3H3zM4.5 7.5v7.5a1.5 1.5 0 0 0 1.5 1.5h8a1.5 1.5 0 0 0 1.5-1.5V7.5M8 11h4',
  trash:
    'M3.5 5.5h13M8 5.5V4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5M5 5.5l.7 10a1.5 1.5 0 0 0 1.5 1.4h5.6a1.5 1.5 0 0 0 1.5-1.4l.7-10M8.5 9v4.5M11.5 9v4.5',
  read: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v9a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5zM3.5 5l6.5 5 6.5-5',
  unread: 'M3 8.5 10 4l7 4.5v6a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 3 14.5zM3.5 9l6.5 4 6.5-4',
};

function Icon({ name }: { name: keyof typeof PATHS }) {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none">
      <path
        d={PATHS[name]}
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        vectorEffect="non-scaling-stroke"
      />
    </svg>
  );
}

interface Message {
  id: string;
  key: number;
  sender: string;
  subject: string;
  time: string;
  unread: boolean;
  enter: boolean;
}

const MESSAGES: Message[] = [
  { id: 'm1', sender: 'Maya Chen', subject: 'Invoice for March is ready', time: '9:41' },
  { id: 'm2', sender: 'Leo Park', subject: 'Design review moved to Friday', time: '9:12' },
  { id: 'm3', sender: 'Billing team', subject: 'Your plan renews on May 1', time: 'Tue' },
  { id: 'm4', sender: 'Ana Ruiz', subject: 'Notes from the team call', time: 'Mon' },
].map((m) => ({ ...m, key: 0, unread: false, enter: false }));

// How long the pretend server takes, how long a folded row stays, and when it comes back (ms).
const WORK = 600;
const ANNOUNCE = 800;
const COME_BACK = 2000;

export default function SwipeActionsDemo({ replay = 0 }: { replay?: number }) {
  const [messages, setMessages] = React.useState(MESSAGES);
  const rows = React.useRef(new Map<string, SwipeActionsHandle>());
  const timers = React.useRef<number[]>([]);

  const later = React.useCallback((ms: number, run: () => void) => {
    timers.current.push(window.setTimeout(run, ms));
  }, []);

  const remove = (message: Message) =>
    new Promise<void>((resolve) => {
      later(WORK, () => {
        resolve();
        // The folded row stays a moment, so its live region can announce the result.
        later(ANNOUNCE, () => {
          let at = 0;
          setMessages((list) => {
            at = list.findIndex((m) => m.id === message.id);
            return list.filter((m) => m.id !== message.id);
          });
          // Bring it back, so the demo never runs out of rows.
          later(COME_BACK, () =>
            setMessages((list) => {
              const next = [...list];
              next.splice(Math.min(at, next.length), 0, { ...message, key: message.key + 1, enter: true });
              return next;
            }),
          );
        });
      });
    });

  const toggleRead = (message: Message) =>
    setMessages((list) => list.map((m) => (m.id === message.id ? { ...m, unread: !m.unread } : m)));

  const actionsFor = (message: Message) => ({
    leading: [
      {
        id: 'read',
        label: message.unread ? 'Mark read' : 'Mark unread',
        icon: <Icon name={message.unread ? 'read' : 'unread'} />,
        onAction: () => toggleRead(message),
      },
    ] satisfies SwipeActionItem[],
    trailing: [
      {
        id: 'archive',
        label: 'Archive',
        tone: 'primary',
        removes: true,
        icon: <Icon name="archive" />,
        onAction: () => remove(message),
      },
      {
        id: 'delete',
        label: 'Delete',
        tone: 'destructive',
        removes: true,
        icon: <Icon name="trash" />,
        onAction: () => remove(message),
      },
    ] satisfies SwipeActionItem[],
  });

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
    setMessages(MESSAGES);
    for (const row of rows.current.values()) row.close();
    later(500, () => rows.current.get('m2')?.open('trailing'));
    later(1900, () => rows.current.get('m2')?.close());
  }, [replay, later]);

  React.useEffect(
    () => () => {
      for (const timer of timers.current) window.clearTimeout(timer);
    },
    [],
  );

  return (
    <div className="w-xxs max-w-full overflow-hidden rounded-xl border border-secondary bg-primary shadow-xs">
      <div className="flex items-center justify-between border-b border-secondary px-4 py-3">
        <h3 className="text-sm font-semibold text-primary">Inbox</h3>
        <span className="text-xs text-quaternary">
          {messages.length} {messages.length === 1 ? 'message' : 'messages'}
        </span>
      </div>
      {messages.map((message) => {
        const { leading, trailing } = actionsFor(message);
        return (
          <SwipeActions
            key={`${message.id}-${message.key}`}
            ref={(handle) => {
              if (handle) rows.current.set(message.id, handle);
              else rows.current.delete(message.id);
            }}
            data-testid={`row-${message.id}`}
            label={`${message.sender}: ${message.subject}`}
            leading={leading}
            trailing={trailing}
            meta={message.time}
            enter={message.enter}
          >
            <div className="flex min-w-0 items-center gap-1.5">
              {message.unread && (
                <span
                  aria-label="Unread"
                  role="img"
                  className="size-2 shrink-0 rounded-full bg-brand-solid"
                />
              )}
              <p className="truncate text-sm font-semibold text-primary">{message.sender}</p>
            </div>
            <p className="mt-0.5 truncate text-sm text-tertiary">{message.subject}</p>
          </SwipeActions>
        );
      })}
    </div>
  );
}