import { FC } from 'react';

import ButtonBase from '@material-hu/mui/ButtonBase';
import LinkIcon from '@material-hu/mui/Link';
import Tooltip from '@material-hu/mui/Tooltip';

import useCopyUrl from 'src/hooks/useCopyUrl';
import { CopyTypePath } from 'src/types/deeplinks';

export type CopyUrlItemProps = {
  type: CopyTypePath;
  route: string;
};

export const CopyUrlItem: FC<CopyUrlItemProps> = props => {
  const { type, route } = props;

  const {
    getCopyString,
    getCopiedString,
    copyUrlToClipboard,
    resetCopiedDelayed,
  } = useCopyUrl();

  const handleOnCopyRoute = event => {
    event.preventDefault();
    event.stopPropagation();
    copyUrlToClipboard(route);
  };

  return (
    <Tooltip
      title={getCopiedString(getCopyString(type))}
      onClose={() => resetCopiedDelayed()}
    >
      <ButtonBase onClick={handleOnCopyRoute}>
        <LinkIcon sx={{ fontSize: '1.625rem', cursor: 'pointer' }} />
      </ButtonBase>
    </Tooltip>
  );
};

export default CopyUrlItem;