import { CopyButton } from '@arcblock/ux/lib/ClickToCopy';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { getWordBreakStyle } from '@blocklet/payment-react';
import { Stack, Typography } from '@mui/material';
import type { ReactNode } from 'react';

interface CopyableProps {
  text: string;
  children?: ReactNode;
  style?: React.CSSProperties;
}
export default function Copyable({ text, children = null, style = {} }: CopyableProps) {
  const { locale } = useLocaleContext();
  return (
    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
    // @ts-ignore
    <CopyButton
      showTooltip={false}
      content={text}
      locale={locale}
      style={style}
      render={({ copyButton, containerRef }: any) => (
        <Stack
          ref={containerRef}
          direction="row"
          sx={{
            alignItems: 'center',
            color: 'text.secondary',
          }}>
          {children || (
            <Typography
              className="copyable-text"
              component="span"
              sx={{
                mr: 0.5,
                maxWidth: 480,
                wordBreak: getWordBreakStyle(text),
                whiteSpace: 'break-spaces',
                minWidth: '60px',
              }}>
              {text}
            </Typography>
          )}
          <Typography sx={{ display: 'inline-flex', '> span': { display: 'inline-flex' } }}>{copyButton}</Typography>
        </Stack>
      )}
    />
  );
}
