import { t } from 'ttag';
import gql from 'graphql-tag';
import Link from 'next/link';
import levelNames from '../constants/levelNames';
import Tooltip from './Tooltip';

export default function ProfileLink({
  user,
  children,

  /**
   * When hasTooltip is true, children must be wrapped with something that can accept ref
   * (such as a <span>) for Material-UI tooltip to attach.
   */
  hasTooltip = false,
  ...otherProps
}) {
  if (!user) {
    return children;
  }

  const levelName = levelNames[user.level];
  const linkProps = user.slug
    ? {
        href: '/user/[slug]',
        as: `/user/${user.slug}`,
      }
    : {
        href: `/user?id=${user.id}`,
      };

  return (
    <Link {...linkProps}>
      <a style={{ color: 'inherit' }} {...otherProps}>
        {hasTooltip ? (
          <Tooltip title={t`Lv.${user.level} ${levelName}`} placement="top">
            {children}
          </Tooltip>
        ) : (
          children
        )}
      </a>
    </Link>
  );
}

ProfileLink.fragments = {
  ProfileLinkUserData: gql`
    fragment ProfileLinkUserData on User {
      id
      slug
      level
    }
  `,
};

@@ -164,16 +164,409 @@
 ltip';%0A%0A
+export function ProfileTooltip(%7B user, children %7D) %7B%0A  if (!user) %7B%0A    return children;%0A  %7D%0A%0A  const levelName = levelNames%5Buser.level%5D;%0A  return (%0A    %3CTooltip title=%7Bt%60Lv.$%7Buser.level%7D $%7BlevelName%7D%60%7D placement=%22top%22%3E%0A      %7Bchildren%7D%0A    %3C/Tooltip%3E%0A  );%0A%7D%0A%0AProfileTooltip.fragments = %7B%0A  ProfileTooltipUserData: gql%60%0A    fragment ProfileTooltipUserData on User %7B%0A      level%0A    %7D%0A  %60,%0A%7D;%0A%0A
 export d
@@ -595,16 +595,16 @@
 eLink(%7B%0A
-
   user,%0A
@@ -865,52 +865,8 @@
  %7D%0A%0A
-  const levelName = levelNames%5Buser.level%5D;%0A
   co
@@ -1149,32 +1149,39 @@
 %0A          %3C
+Profile
 Tooltip 
 title=%7Bt%60Lv.
@@ -1172,101 +1172,39 @@
 tip 
-title=%7Bt%60Lv.$%7Buser.level%7D $%7BlevelName%7D%60%7D placement=%22top%22%3E%0A            %7Bchildren%7D%0A          %3C/
+user=%7Buser%7D%3E%7Bchildren%7D%3C/Profile
 Tool
@@ -1402,32 +1402,107 @@
  slug%0A      
-level%0A    
+...ProfileTooltipUserData%0A    %7D%0A    $%7BProfileTooltip.fragments.ProfileTooltipUserData
 %7D%0A  %60,%0A%7D;%0A

introduce subcomponent ProfileTooltip that has no link function