/**
 * @deprecated — no dedicated Hugo equivalent.
 * Copy-to-clipboard button for deep links — shows a link icon that checks on copy.
 * Also exports `copyLinkContainerStyle` and `shadowHover` sx helpers used by many consumers.
 * Hint: for standalone use compose `IconButton` from `@material-hu/mui/IconButton` + native clipboard API.
 * Note: `UserCard` from `@material-hu/components/composed-components/UserCard` has built-in copy for user context.
 */
import { useState } from 'react';

import { IconCircleCheck, IconLink } from '@material-hu/icons/tabler';
import IconButton, { type IconButtonProps } from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/index';
import Tooltip from '@material-hu/mui/Tooltip';

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

import { copyToClipboard } from './utils';

type Props = {
  type: CopyTypePath;
  id?: number | string;
  subId?: number;
  hash?: string;
  IconButtonProps?: IconButtonProps;
  iconColor?: string;
  hoveredIconColor?: string;
};

const CopyLink = ({
  type,
  id,
  subId,
  hash,
  iconColor,
  hoveredIconColor,
  IconButtonProps,
}: Props) => {
  const { t } = useLokaliseTranslation('deeplinks');
  const theme = useTheme();
  const [hovered, setHovered] = useState(false);
  const [copied, setCopied] = useState(false);

  const handleCopy = async (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation();
    copyToClipboard(type, id, subId, hash, () => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    });
  };

  const color = iconColor || theme.palette.text.secondary;

  return (
    <Tooltip
      title={
        copied ? t('copy_success') : t('copy', { resource: t(type.toString()) })
      }
      onClose={() => setTimeout(() => setCopied(false), 300)}
    >
      <IconButton
        id="copy-link-button"
        aria-label={t('copy')}
        sx={{ padding: 0, px: '5px' }}
        onClick={handleCopy}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        className="copy-link-button"
        {...IconButtonProps}
      >
        {copied ? (
          <IconCircleCheck
            size={12}
            color={color}
          />
        ) : (
          <IconLink
            size={12}
            color={hovered ? hoveredIconColor : color}
          />
        )}
      </IconButton>
    </Tooltip>
  );
};

export default CopyLink;

export const copyLinkContainerStyle = {
  cursor: 'pointer',
  '& .copy-link-button': {
    opacity: 0,
  },
  '&:hover .copy-link-button': {
    opacity: 1,
  },
};

export const shadowHover = {
  '& .shadowHover': {
    boxShadow: 1,
  },
  '&:hover .shadowHover': {
    boxShadow: 5,
  },
};