import { FC } from 'react';

import { IconLink } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

import useCopyUrl from 'src/hooks/useCopyUrl';

export type HeaderViewDocumentsProps = {
  label?: string;
  route?: string;
  title?: string;
};

export const HeaderViewDocuments: FC<HeaderViewDocumentsProps> = props => {
  const { label, route, title } = props;

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

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    copyUrlToClipboard(route);
  };

  return (
    <Stack sx={{ alignItems: 'center', flexDirection: 'row', py: 2 }}>
      <Typography
        variant="globalL"
        fontWeight="fontWeightSemibold"
      >
        {title}
      </Typography>
      <Tooltip
        title={getCopiedString(label)}
        onClose={() => resetCopiedDelayed()}
      >
        <IconButton
          onClick={handleClick}
          aria-label={label}
        >
          <IconLink />
        </IconButton>
      </Tooltip>
    </Stack>
  );
};

export default HeaderViewDocuments;