<commit_before>// Copyright (c) ppy Pty Ltd <<EMAIL>>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

import FlagCountry from 'flag-country';
import GameMode from 'interfaces/game-mode';;
import UserJsonExtended from 'interfaces/user-json-extended';
import { route } from 'laroute';
import * as _ from 'lodash';
import * as React from 'react';
import UserAvatar from 'user-avatar';
import UserGroupBadges from 'user-group-badges';

interface Props {
  coverUrl: string | null;
  currentMode: GameMode | null;
  user: UserJsonExtended;
}

const bn = 'profile-info';

export default class HeaderInfo extends React.PureComponent<Props> {
  render() {
    const avatar = <UserAvatar modifiers={['full']} user={this.props.user} />;
    return (
      <div className={bn}>
        <div className={`${bn}_bg`} style={{ backgroundImage: osu.urlPresence(this.props.coverUrl) }} />
        {this.props.user.id === currentUser.id ? (
          <a className={`${bn}__avatar`} href={`${route('account.edit')}$avatar`} title={osu.trans('users.show.change_avatar')}>{avatar}</a>
        ) : (
          <div className={`${bn}__avatar`}>{avatar}</div>
        )}
        <div className={`${bn}__details`}>
          <h1 className={`${bn}__name`}>
            <span className='u-ellipsis-pre-overflow'>{this.props.user.username}</span>
            <div className={`${bn}__previous-usernames`}>{this.previousUsernames()}</div>
          </h1>
          {this.renderTitle()}
          <div className={`${bn}__icon-group`}>
            <div className={`${bn}__icons`}>
              {this.props.user.is_supporter && (
                <span className={`${bn}__icon ${bn}__icon--supporter`} title={osu.trans('users.show.is_supporter')}>
                  {
                    _(this.props.user.support_level).times((i) => <span key={i} className='fas fa-heart'/>)
                  }
                </span>
              )}
              <UserGroupBadges groups={this.props.user.groups} modifiers={['profile-page']} wrapper={`${bn}__icon`} />
            </div>
            <div className={`${bn}__icons ${bn}__icons--flag`}>
              {this.props.user.country?.code != null && (
                <a
                  className={`${bn}__flag ${bn}__flag--country`}
                  href={route('rankings', { country: this.props.user.country.code, mode: this.props.currentMode, type: 'performance' })}
                >
                  <span className={`${bn}__flag-flag`}>
                    <FlagCountry country={this.props.user.country} />
                  </span>
                  <span className={`${bn}__flag-text`}>{this.props.user.country.name}</span>
                </a>
              )}
            </div>
          </div>
        </div>
        <div
          className='profile-info__bar hidden-xs'
          style={{ backgroundColor: this.props.user.profile_colour ?? '' }}
        />
      </div>
    );
  }

  renderTitle() {
    if (this.props.user.title == null) return null;

    const props = {
      className: `${bn}__title`,
      href: this.props.user.title_url,
      style: { color: this.props.user.profile_colour },
    };

    return this.props.user.title_url != null ? (
      <a {...props}>{this.props.user.title}</a>
    ) : (
      <span {...props}>{this.props.user.title}</span>
    );
  }


  private doNothing = () => {
    //
  };

  private previousUsernames() {
    if (this.props.user.previous_usernames.length === 0) return null;

    const previousUsernames = this.props.user.previous_usernames.join(', ');

    return (
      <div className='profile-previous-usernames'>
        <a
          className='profile-previous-usernames__icon profile-previous-usernames__icon--with-title'<commit_msg>less string interpolation<commit_after>// Copyright (c) ppy Pty Ltd <<EMAIL>>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

import FlagCountry from 'flag-country';
import GameMode from 'interfaces/game-mode';
import UserJsonExtended from 'interfaces/user-json-extended';
import { route } from 'laroute';
import * as _ from 'lodash';
import * as React from 'react';
import UserAvatar from 'user-avatar';
import UserGroupBadges from 'user-group-badges';

interface Props {
  coverUrl: string | null;
  currentMode: GameMode | null;
  user: UserJsonExtended;
}

export default class HeaderInfo extends React.PureComponent<Props> {
  render() {
    const avatar = <UserAvatar modifiers={['full']} user={this.props.user} />;
    return (
      <div className='profile-info'>
        <div className='profile-info_bg' style={{ backgroundImage: osu.urlPresence(this.props.coverUrl) }} />
        {this.props.user.id === currentUser.id ? (
          <a className='profile-info__avatar' href={`${route('account.edit')}#avatar`} title={osu.trans('users.show.change_avatar')}>{avatar}</a>
        ) : (
          <div className='profile-info__avatar'>{avatar}</div>
        )}
        <div className='profile-info__details'>
          <h1 className='profile-info__name'>
            <span className='u-ellipsis-pre-overflow'>{this.props.user.username}</span>
            <div className='profile-info__previous-usernames'>{this.previousUsernames()}</div>
          </h1>
          {this.renderTitle()}
          <div className='profile-info__icon-group'>
            <div className='profile-info__icons'>
              {this.props.user.is_supporter && (
                <span className='profile-info__icon profile-info__icon--supporter' title={osu.trans('users.show.is_supporter')}>
                  {
                    _(this.props.user.support_level).times((i) => <span key={i} className='fas fa-heart'/>)
                  }
                </span>
              )}
              <UserGroupBadges groups={this.props.user.groups} modifiers={['profile-page']} wrapper='profile-info__icon' />
            </div>
            <div className='profile-info__icons profile-info__icons--flag'>
              {this.props.user.country?.code != null && (
                <a
                  className='profile-info__flag profile-info__flag--country'
                  href={route('rankings', { country: this.props.user.country.code, mode: this.props.currentMode, type: 'performance' })}
                >
                  <span className='profile-info__flag-flag'>
                    <FlagCountry country={this.props.user.country} />
                  </span>
                  <span className='profile-info__flag-text'>{this.props.user.country.name}</span>
                </a>
              )}
            </div>
          </div>
        </div>
        <div
          className='profile-info__bar hidden-xs'
          style={{ backgroundColor: this.props.user.profile_colour ?? '' }}
        />
      </div>
    );
  }

  renderTitle() {
    if (this.props.user.title == null) return null;

    const props = {
      className: 'profile-info__title',
      href: this.props.user.title_url,
      style: { color: this.props.user.profile_colour },
    };

    return this.props.user.title_url != null ? (
      <a {...props}>{this.props.user.title}</a>
    ) : (
      <span {...props}>{this.props.user.title}</span>
    );
  }


  private doNothing = () => {
    //
  };

  private previousUsernames() {
    if (this.props.user.previous_usernames.length === 0) return null;

    const previousUsernames = this.props.user.previous_usernames.join(', ');

    return (
      <div className='profile-previous-usernames'>
        <a
          className='profile-previous-usernames__icon profile-previous-usernames__icon--with-title'
{'fraction_non_alphanumeric': 0.157990393353239, 'fraction_numerical': 0.0012981955082435415, 'mean_word_length': 2.4148936170212765, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6882113', 'n_tokens_mistral': 2355, 'n_tokens_neox': 2300, 'n_words': 408}