import React from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { ContentCopyRounded } from '@mui/icons-material';

import { TYPE_SUCCESS } from '@/modules/@common/notify/constants';

import copy from '@/modules/@common/helpers/copy';
import { notifyAction } from '@/modules/@common/notify/redux/slices';

import { IconButton, Stack, Tooltip } from '@/mui/components';

function CopyTooltip(props) {
  const dispatch = useDispatch();

  return (
    !!props.title && (
      <Tooltip
        title={
          <Stack direction="row" alignItems="center">
            <div>{props.title}</div>
            <IconButton
              size="xSmall"
              onClick={() => {
                copy(props.title).then(() => {
                  dispatch(
                    notifyAction({
                      type: TYPE_SUCCESS,
                      message: 'Copied to clipboard',
                    }),
                  );
                });
              }}
            >
              <ContentCopyRounded />
            </IconButton>
          </Stack>
        }
      >
        {props.children}
      </Tooltip>
    )
  );
}

CopyTooltip.propTypes = {
  title: PropTypes.node,
  children: PropTypes.node,
};

export default CopyTooltip;
