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

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

import copyToClipboard from '@/modules/@common/helpers/copy';

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

import styles from './IdCell.module.scss';

function IdCell(props) {
  const handleCopy = (e) => {
    e.preventDefault();
    copyToClipboard(props.cell).then(() => {
      // eslint-disable-next-line react/prop-types
      props.showNotification({
        type: TYPE_SUCCESS,
        message: 'Tag ID was copied to clipboard',
      });
    });
  };

  return (
    <Tooltip
      placement="top"
      interactive="true"
      leaveDelay={200}
      title={
        <div className={styles.Tooltip}>
          {props.cell}
          <IconButton onClick={handleCopy} size="small">
            <ContentCopyRounded />
          </IconButton>
        </div>
      }
    >
      <div className={styles.IdCell}>{props.cell}</div>
    </Tooltip>
  );
}

IdCell.propTypes = {
  cell: PropTypes.string.isRequired,
};

export default IdCell;
