import { FC } from 'react';

import { IconLink } from '@material-hu/icons/tabler';

import HuListItem from '@material-hu/components/design-system/List/components/ListItem';
import HuMenuItem from '@material-hu/components/design-system/Menu/components/MenuItem';
import { MenuItemProps } from '@material-hu/components/design-system/Menu/components/MenuItem/types';
import useHuSnackbar from '@material-hu/components/design-system/Snackbar';

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

export type CopyUrlMenuItemProps = MenuItemProps & {
  type?: CopyTypePath;
  route?: string;
};

export const CopyUrlMenuItem: FC<CopyUrlMenuItemProps> = props => {
  const { enqueueSnackbar } = useHuSnackbar();
  const { type, route, ...menuProps } = props;

  const { getCopyString, copyUrlToClipboard } = useCopyUrl();
  const { t } = useLokaliseTranslation('deeplinks');

  const handleClick = () => {
    copyUrlToClipboard(route);
    enqueueSnackbar({
      title: t('copied'),
      variant: 'success',
    });
  };

  return (
    <HuMenuItem
      {...menuProps}
      onClick={handleClick}
      sx={{ p: 0 }}
    >
      <HuListItem
        sx={{ p: 0 }}
        avatar={{ Icon: IconLink }}
        text={{
          title: getCopyString(type),
        }}
      />
    </HuMenuItem>
  );
};

export default CopyUrlMenuItem;