import { useState } from 'react';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CheckIcon from '@mui/icons-material/Check';
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
import { Tooltip } from '@mui/material';
import { SxProps, Theme } from '@mui/material';

interface CopyBubbleProps extends IconButtonProps {
  content: string | undefined,
  sx?: SxProps<Theme>;
  tooltip?: string;
}

const CopyBubble = ({
  content,
  sx,
  tooltip = "Copy to clipboard",
  onClick,
  ...rest
} : CopyBubbleProps) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = (e: any) => {
    if (content === undefined) {
      return;
    }

    navigator.clipboard.writeText(content.trim()).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000); // Reset after 2 seconds
    });

    if (onClick) {
      onClick(e);
    }
  };

return (
  <Tooltip title={tooltip} placement="top" arrow>
    <IconButton
      onClick={(e) => { handleCopy(e) }}
      sx={{
        width: 24,
        height: 24,
        opacity: 0.75,
        bgcolor: 'background.paper',
        '&:hover': { bgcolor: 'action.hover', opacity: 1 },
        ...sx,
      }}
      size="small"
      color={copied ? "success" : "default"}
      {...rest}
    >
      {copied ? <CheckIcon sx={{ width: 16, height: 16 }} /> : <ContentCopyIcon sx={{ width: 16, height: 16 }} />}
    </IconButton>
  </Tooltip>
  );
}

export {
  CopyBubble
}