import { Box, CopyButton, Typography, Tooltip, BoxProps } from '@tidbcloud/uikit'
import { IconCopy01 } from '@tidbcloud/uikit/icons'

export interface CopyURLProps extends BoxProps {
  value: string
  timeout?: number
  onClick?: () => void
}

export const CopyURL: React.FC<React.PropsWithChildren<CopyURLProps>> = ({ value, ...props }) => {
  return (
    <CopyButton value={value} timeout={1000} {...props}>
      {({ copied, copy }) => (
        <Box
          sx={(theme) => ({
            display: 'flex',
            alignItems: 'center',
            paddingLeft: 12,
            paddingRight: 8,
            height: 40,
            borderRadius: theme.defaultRadius,
            backgroundColor: theme.colors.carbon[2],
            border: `1px solid ${theme.colors.carbon[5]}`
          })}
          {...props}
        >
          <Typography
            variant="body-lg"
            c="carbon.8"
            sx={() => ({
              flex: '1',
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              marginRight: 8
            })}
          >
            {value}
          </Typography>
          <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
            <IconCopy01
              size={16}
              onClick={() => {
                copy()
                props.onClick?.()
              }}
            />
          </Tooltip>
        </Box>
      )}
    </CopyButton>
  )
}