import { Button, Box, Tooltip, ActionIcon, CopyButton as UIKitCopyButton } from '@tidbcloud/uikit'
import { IconCheck, IconCopy01 } from '@tidbcloud/uikit/icons'
import clsx from 'clsx'

export const CopyButton = ({
  text,
  icon = false,
  menuName = '',
  textOnly = false,
  className,
  withTooltip = true
}: {
  className?: string
  text: string
  icon?: boolean
  primary?: boolean
  menuName?: string
  textOnly?: boolean
  withTooltip?: boolean
}) => {
  if (icon) {
    return (
      <UIKitCopyButton value={text}>
        {({ copied, copy }) => (
          <Tooltip disabled={!withTooltip} label={copied ? 'Copied!' : 'Copy'}>
            <ActionIcon className={clsx(className)} onClick={copy} data-mp-event={`${menuName}-Copy Button Clicked`}>
              <Box component={copied ? IconCheck : IconCopy01} c="carbon.8" size={16} />
            </ActionIcon>
          </Tooltip>
        )}
      </UIKitCopyButton>
    )
  }

  return (
    <UIKitCopyButton value={text}>
      {({ copied, copy }) => (
        <Button
          type="button"
          color="default"
          disabled={!text}
          data-mp-event={`${menuName}-Copy Button Clicked`}
          onClick={copy}
          leftSection={textOnly ? null : <Box component={copied ? IconCheck : IconCopy01} size={16} c="carbon.8" />}
        >
          {copied ? 'Copied!' : 'Copy'}
        </Button>
      )}
    </UIKitCopyButton>
  )
}

export default CopyButton