import { type ReactNode, useState } from 'react';

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

import Title from '@material-hu/components/design-system/Title';
import { type TitleVariantTypes } from '@material-hu/components/design-system/Title/types';
import Tooltip from '@material-hu/components/design-system/Tooltip';

import { useLokaliseTranslation } from 'src/utils/i18n';

type TitleWithCopyTooltipProps = {
  title: ReactNode;
  copetin: string;
  variant?: TitleVariantTypes;
  valueToCopy: string;
};
export const TitleWithCopyTooltip = ({
  title,
  copetin,
  variant = 'S',
  valueToCopy,
}: TitleWithCopyTooltipProps) => {
  const { t } = useLokaliseTranslation('general');
  const [hover, setHover] = useState(false);
  const [tooltipText, setTooltipText] = useState(t('copy'));

  const handleCopy = async () => {
    await navigator.clipboard.writeText(valueToCopy);
    setTooltipText(t('copied'));
  };

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 0.5,
        cursor: 'pointer',
        width: 'fit-content',
      }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => {
        setHover(false);
        setTooltipText(t('copy'));
      }}
    >
      <Title
        title={title}
        copetin={copetin}
        variant={variant}
      />
      {hover && (
        <Tooltip title={tooltipText}>
          <IconButton
            size="small"
            sx={{
              alignSelf: 'flex-end',
              '&.MuiIconButton-root > svg': {
                stroke: theme => theme.palette.newBase?.brand[900],
              },
            }}
            onClick={handleCopy}
          >
            <IconCopy size={24} />
          </IconButton>
        </Tooltip>
      )}
    </Stack>
  );
};