Button

'use client';

import * as React from 'react';
import { Button } from './button';

const LOADING_MS = 1600;

function PlusIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
    >
      <path d="M10 4.167v11.666M4.167 10h11.666" />
    </svg>
  );
}

function ArrowRightIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M4.167 10h11.666M10 4.167 15.833 10 10 15.833" />
    </svg>
  );
}

function SaveIcon() {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 20 20"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.67"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M5.833 2.5v3.333h6.667M14.167 17.5v-6.667H5.833V17.5M15.833 17.5H4.167A1.667 1.667 0 0 1 2.5 15.833V4.167A1.667 1.667 0 0 1 4.167 2.5h9.166L17.5 6.667v9.166a1.667 1.667 0 0 1-1.667 1.667Z" />
    </svg>
  );
}

const hierarchies = [
  ['primary', 'Primary'],
  ['secondary', 'Secondary'],
  ['tertiary', 'Tertiary'],
  ['link-color', 'Link color'],
  ['link-gray', 'Link gray'],
] as const;

const destructiveHierarchies = [
  ['primary', 'Delete'],
  ['secondary', 'Delete'],
  ['tertiary', 'Delete'],
  ['link-color', 'Delete'],
] as const;

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function ButtonDemo({ replay = 0 }: { replay?: number }) {
  const [saving, setSaving] = React.useState(false);
  const timer = React.useRef<number | undefined>(undefined);

  const save = React.useCallback(() => {
    window.clearTimeout(timer.current);
    setSaving(true);
    timer.current = window.setTimeout(() => setSaving(false), LOADING_MS);
  }, []);

  React.useEffect(() => {
    if (replay > 0) save();
  }, [replay, save]);

  React.useEffect(() => () => window.clearTimeout(timer.current), []);

  return (
    <div className="flex flex-col items-center gap-8">
      <div className="flex flex-wrap items-center justify-center gap-3">
        {hierarchies.map(([hierarchy, label]) => (
          <Button key={hierarchy} hierarchy={hierarchy} iconLeading={<PlusIcon />}>
            {label}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        {destructiveHierarchies.map(([hierarchy, label]) => (
          <Button key={hierarchy} hierarchy={hierarchy} destructive>
            {label}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        {sizes.map((size) => (
          <Button key={size} size={size} hierarchy="secondary" iconTrailing={<ArrowRightIcon />}>
            Size {size}
          </Button>
        ))}
      </div>
      <div className="flex flex-wrap items-center justify-center gap-3">
        <Button data-testid="save-button" loading={saving} iconLeading={<SaveIcon />} onClick={save}>
          {saving ? 'Saving' : 'Save'}
        </Button>
        <Button hierarchy="secondary" disabled>
          Disabled
        </Button>
        <Button hierarchy="secondary" iconOnly aria-label="Add item">
          <PlusIcon />
        </Button>
      </div>
    </div>
  );
}