import React, { useState } from 'react'
import { shortUuid } from '@freesewing/utils'
import { Link } from '@freesewing/react/components/Link'
import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'

/*
 * Displays a UUID, but shorter
 *
 * @param {object} props - All React props
 * @param {string} uuid - The UUID
 * @param {string} href - An optional href to make this UUID a link
 * @param {string} label - An optional label to show in the loading status
 */
export const Uuid = ({ uuid, href = false, label = false }) => {
  const [full, setFull] = useState()
  const short = shortUuid(uuid)

  if (href === false)
    return (
      <span className="flex flex-row items-center">
        <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
        <CopyToClipboardButton content={uuid} label="UUID" sup />
      </span>
    )

  return (
    <span className="flex flex-row items-center">
      <Link href={href} title={uuid}>
        <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
      </Link>
      <CopyToClipboardButton content={uuid} label="UUID" sup label />
    </span>
  )
}