import { type FC, type PropsWithChildren } from 'react';

import { tooltipClasses } from '@material-hu/mui/Tooltip';

import UserCard from '@material-hu/components/composed-components/UserCard';
import HuTooltip, {
  type TooltipProps,
} from '@material-hu/components/design-system/Tooltip';

import { profileRoutes } from 'src/pages/dashboard/profile/routes';
import { type UserTask } from 'src/pages/dashboard/serviceManagement/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

const USER_TOOLTIP_DELAY_MS = 500;

type Props = {
  user: UserTask | null | undefined;
  tooltipProps?: Omit<TooltipProps, 'title' | 'children' | 'delay'>;
};

const UserTooltip: FC<PropsWithChildren<Props>> = ({
  user,
  children,
  tooltipProps,
}) => {
  const { t } = useLokaliseTranslation('service_management');
  if (!user) return null;
  return (
    <HuTooltip
      title={
        <UserCard
          user={user}
          actionButtons={[
            {
              label: t('go_to_profile'),
              onClick: () =>
                window.open(profileRoutes.profile(user.id), '_blank'),
              variant: 'secondary',
            },
          ]}
          labels={{
            copiedLabel: t('copied'),
            copyEmailLabel: t('copy_email_to_clipboard'),
          }}
        />
      }
      delay={USER_TOOLTIP_DELAY_MS}
      slotProps={{
        arrow: {
          sx: {
            display: 'none',
          },
        },
        popper: {
          sx: {
            [`& .${tooltipClasses.arrow}`]: {
              display: 'none',
            },
            [`& .${tooltipClasses.tooltip}`]: {
              backgroundColor: 'transparent',
              borderRadius: 2,
            },
          },
        },
        ...(tooltipProps?.slotProps ?? {}),
      }}
      {...tooltipProps}
    >
      <span>{children}</span>
    </HuTooltip>
  );
};

export default UserTooltip;
