import React from 'react'

import Button from '../button'
import { vui } from '../core'
import { cs } from '../utils'
import { CopyToClipboardProps } from './copyToClipboard.types'
import { useCopyToClipboard } from './useCopyToClipboard'

/**
 * A helper button component.
 *
 * Copies the provided text to clipboard.
 *
 * Copying is available only for a secure environment (https://), otherwise the button is disabled.
 *
 */
export const CopyToClipboard = vui<'button', CopyToClipboardProps>((props, ref) => {
  const { disabled, copyText, className, size = 'sm', variant = 'tertiaryDark', ...rest } = props

  const { copy, isCopyDisabled } = useCopyToClipboard(copyText)

  return (
    <Button
      aria-label="copy to clipboard"
      className={cs('vui-copy-to-clipboard', className)}
      disabled={disabled || isCopyDisabled}
      icon="falCopy"
      onClick={() => copy()}
      ref={ref}
      size={size}
      variant={variant}
      {...rest}
    />
  )
})

CopyToClipboard.displayName = 'CopyToClipboard'
export default CopyToClipboard
