import { useEffect, useState } from 'react'
import { CheckIcon, CopyIcon } from '../icons.tsx'
import { Button, IconButton, type IconButtonProps } from './Button.tsx'
import { IconSwap } from './IconSwap.tsx'

interface CopyIconSwapProps {
  copied: boolean
}

/** The copy icon, which gives way to a check once copied. */
export function CopyIconSwap(props: CopyIconSwapProps) {
  return <IconSwap swapped={props.copied} from={<CopyIcon />} to={<CheckIcon />} />
}

interface Props {
  text: string
  /** Show an icon in place of the words, as among a message's actions. */
  icon?: boolean
  /** The icon's tone, such as a message action's. */
  tone?: IconButtonProps['tone']
  className?: string
}

/** Copy text, saying so for a moment once it is copied. */
export function CopyButton(props: Props) {
  const [copied, setCopied] = useState(false)
  useEffect(() => {
    if (!copied) return
    const timer = setTimeout(() => setCopied(false), 1500)
    return () => clearTimeout(timer)
  }, [copied])
  const copy = () => void navigator.clipboard.writeText(props.text).then(() => setCopied(true))
  const label = copied ? 'Copied' : 'Copy'
  if (!props.icon)
    return (
      <Button onClick={copy} className={props.className}>
        {label}
      </Button>
    )
  return (
    <IconButton aria-label={label} tone={props.tone} onClick={copy} className={props.className}>
      <CopyIconSwap copied={copied} />
    </IconButton>
  )
}