import { useEffect, useState, type ReactElement, type ReactNode } from 'react'

// The view's small buttons, icons named for screen readers and on hover. A delete takes a second
// press, since a view's frame shows no dialog to confirm with.

const CONFIRM_MS = 3000

export function IconButton({
  label,
  onClick,
  className,
  children,
}: {
  label: string
  onClick: () => void
  className?: string
  children: ReactNode
}): ReactElement {
  return (
    <button
      type="button"
      className={className ? `ag-icon ${className}` : 'ag-icon'}
      aria-label={label}
      title={label}
      onClick={onClick}
    >
      <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
        {children}
      </svg>
    </button>
  )
}

/** The + that starts a new one of what its list holds, at the end of its bar. */
export function AddButton({ label, onClick }: { label: string; onClick: () => void }): ReactElement {
  return (
    <IconButton label={label} onClick={onClick} className="ag-add">
      <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" strokeWidth="1.8" />
    </IconButton>
  )
}

/** A trash can that turns red on a press: a second press within a few seconds deletes. */
export function DeleteButton({ label, onDelete }: { label: string; onDelete: () => void }): ReactElement {
  const [armed, setArmed] = useState(false)
  useEffect(() => {
    if (!armed) return
    const timer = setTimeout(() => setArmed(false), CONFIRM_MS)
    return () => clearTimeout(timer)
  }, [armed])
  return (
    <IconButton
      label={armed ? `${label}: press again` : label}
      className={armed ? 'ag-danger' : undefined}
      onClick={() => {
        if (armed) {
          setArmed(false)
          onDelete()
        } else {
          setArmed(true)
        }
      }}
    >
      <path
        d="M4.5 6.5h15M9.5 6.5V4.5h5v2M6.5 6.5l1 13h9l1-13M10.5 10v6M13.5 10v6"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
      />
    </IconButton>
  )
}

export function EditButton({ label, onClick }: { label: string; onClick: () => void }): ReactElement {
  return (
    <IconButton label={label} onClick={onClick}>
      <path d="M15 5.5 18.5 9 9 18.5H5.5V15ZM12.5 8l3.5 3.5" fill="none" stroke="currentColor" strokeWidth="1.6" />
    </IconButton>
  )
}

export function RefreshButton({ label, onClick }: { label: string; onClick: () => void }): ReactElement {
  return (
    <IconButton label={label} onClick={onClick}>
      <path d="M18.5 12a6.5 6.5 0 1 1-2-4.7M18.5 4.5v4h-4" fill="none" stroke="currentColor" strokeWidth="1.6" />
    </IconButton>
  )
}

export function StopButton({ label, onClick }: { label: string; onClick: () => void }): ReactElement {
  return (
    <IconButton label={label} onClick={onClick}>
      <rect x="7" y="7" width="10" height="10" fill="currentColor" />
    </IconButton>
  )
}

/** Copies on a press, and shows a check for a moment once it has. */
export function CopyButton({ label, onCopy }: { label: string; onCopy: () => Promise<void> }): ReactElement {
  const [copied, setCopied] = useState(false)
  useEffect(() => {
    if (!copied) return
    const timer = setTimeout(() => setCopied(false), CONFIRM_MS / 2)
    return () => clearTimeout(timer)
  }, [copied])
  return (
    <IconButton
      label={copied ? 'Copied' : label}
      onClick={() =>
        void onCopy().then(
          () => setCopied(true),
          () => {},
        )
      }
    >
      {copied ? (
        <path d="M5 12.5 10 17.5 19 7" fill="none" stroke="currentColor" strokeWidth="1.8" />
      ) : (
        <path d="M8.5 8.5h11v11h-11zM15.5 8.5v-4h-11v11h4" fill="none" stroke="currentColor" strokeWidth="1.6" />
      )}
    </IconButton>
  )
}