import 'core-js/modules/es.array.iterator.js';
import 'core-js/modules/web.dom-collections.iterator.js';
import 'core-js/modules/es.object.assign.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { styled, Grow, Fade } from '@mui/material';
import { useState, useCallback } from 'react';
import { IconFont } from '../../atom/IconFont/IconFont.js';
import { Tooltip } from '../../atom/Tooltip/Tooltip.js';
import { Typography } from '../../atom/Typography/Typography.js';

let _ = t => t,
  _t,
  _t2;
const StyledContainer = styled('div')(_t || (_t = _`
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 24px;
`));
const StyledContext = styled('div')(_t2 || (_t2 = _`
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
`));
const CopyButton = ({
  value,
  children,
  color,
  sx,
  showTooltip: _showTooltip = false,
  onlyIconChange: _onlyIconChange = false
}) => {
  const [copying, setCopying] = useState(false);
  const copyAddress = useCallback(() => {
    navigator.clipboard.writeText(value);
    if (!copying) {
      setCopying(true);
      setTimeout(() => {
        setCopying(false);
      }, 3000);
    }
  }, [copying, value, setCopying]);
  return jsx(StyledContainer, Object.assign({
    onClick: e => {
      e.stopPropagation();
      copyAddress();
    }
  }, {
    children: copying && !_onlyIconChange ? jsx(Grow, Object.assign({
      in: copying
    }, {
      children: jsxs(StyledContext, Object.assign({
        sx: sx
      }, {
        children: [jsx(Typography, Object.assign({
          variant: "caption",
          color: "text.secondary"
        }, {
          children: "Copied!"
        })), jsx(IconFont, {
          name: "check_circle",
          fontSize: 20,
          color: color
        })]
      }))
    })) : jsx(Fade, Object.assign({
      in: !copying || _onlyIconChange
    }, {
      children: jsxs(StyledContext, Object.assign({
        sx: Object.assign({
          minWidth: 0,
          marginRight: '0.5rem'
        }, sx)
      }, {
        children: [children, _showTooltip ? jsx(Tooltip, Object.assign({
          title: copying ? ' Copied' : 'Copy',
          placement: "top"
        }, {
          children: jsx(IconFont, {
            name: copying ? 'check_circle' : 'content_copy',
            fontSize: 20,
            color: color
          })
        })) : jsx(IconFont, {
          name: copying ? 'check_circle' : 'content_copy',
          fontSize: 20,
          color: color
        })]
      }))
    }))
  }));
};

export { CopyButton, CopyButton as default };
