Status button

'use client';

import * as React from 'react';
import { StatusButton } from './status-button';
import type { StatusButtonStatus } from './status-button-variants';

// How long the pretend request takes (ms).
const WORK = 1200;
const PUBLISH = { idle: 'Publish', loading: 'Publishing', success: 'Published', error: 'Try again' };

function UploadIcon() {
  return (
    <svg aria-hidden="true" viewBox="0 0 20 20" fill="none">
      <path
        d="M10 13.5v-9m0 0-3.5 3.5M10 4.5l3.5 3.5M4 15.5h12"
        stroke="currentColor"
        strokeWidth="1.67"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function StatusButtonDemo({ replay = 0 }: { replay?: number }) {
  const [save, setSave] = React.useState<StatusButtonStatus>('idle');
  const [publish, setPublish] = React.useState<StatusButtonStatus>('idle');
  const attempts = React.useRef(0);
  const timers = React.useRef<number[]>([]);

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

  const runSave = React.useCallback(() => {
    setSave('loading');
    later(WORK, () => setSave('success'));
  }, [later]);

  // The first try fails and the retry works, so both results show.
  const runPublish = () => {
    attempts.current += 1;
    const fails = attempts.current % 2 === 1;
    setPublish('loading');
    later(WORK, () => setPublish(fails ? 'error' : 'success'));
  };

  React.useEffect(() => {
    if (replay === 0) return;
    for (const timer of timers.current) window.clearTimeout(timer);
    timers.current = [];
    setSave('idle');
    later(300, runSave);
  }, [replay, later, runSave]);

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

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <StatusButton data-testid="save" status={save} onClick={runSave} onReset={() => setSave('idle')} />
      <StatusButton
        data-testid="publish"
        variant="outline"
        status={publish}
        labels={PUBLISH}
        icon={<UploadIcon />}
        onClick={runPublish}
        onReset={() => setPublish('idle')}
      />
    </div>
  );
}