<commit_before>import { Icon } from 'material-ui';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import { connect, Dispatch } from 'react-redux';
import { push } from 'redux-little-router';
import { createSelector } from 'reselect';

import * as playerActions from '../../actions/players';
import { ComparePlayersLabelColumn } from '../../components/ComparePlayersLabelColumn';
import { ComparePlayersStatColumn } from '../../components/ComparePlayersStatColumn';
import { Loading } from '../../components/Loading';
import { SuggestPlayer } from '../../components/SuggestPlayer';
import * as fromRoot from '../../reducers';
import * as fromPlayers from '../../reducers/players';
import { PlayerCompareOption } from '../../reducers/routing';
import { assert } from '../../shared/assert';
import { Position } from '../../shared/service/api';
import { AbilityFlags, getHighestAbilities } from '../../shared/utils/player';
import { AddButton, PaperContainer, PlayerInputContainer } from './styles';

export interface ViewModel {
  players: PlayerViewModel[];
  position?: Position;
}

export interface State {
  /** Show the "add player" input */
  showPlayerInput: boolean;
}

export interface PlayerViewModel
  extends PlayerCompareOption,
    fromPlayers.BaseViewModel {}

export interface Actions {
  getPlayer: typeof playerActions.getPlayer;
  pushUrl: typeof push;
  dispatch: Dispatch<fromRoot.State>;
}

const createPlayerViewModel = (
  state: fromPlayers.State,
  playerOptions: PlayerCompareOption
): PlayerViewModel => {
  const baseView = fromPlayers.getPlayerBaseView(state, playerOptions.id);
  return {
    ...baseView,
    form: 'A',
    level: 30
  };
};

export class ComparePlayers extends React.PureComponent<ViewModel & Actions> {
  state: State = {
    showPlayerInput: false
  };

  componentDidMount() {
    this.fetchMissingPlayers(this.props);
  }

  componentWillReceiveProps(nextProps: ViewModel) {
    if (nextProps.players !== this.props.players) {
      this.fetchMissingPlayers(nextProps);
    }
  }

  render() {
    const { players } = this.props;
    const highlights = this.calculateHighlights(players);
    const colWidth = players.length === 3 ? 3 : 4;
    const { showPlayerInput } = this.state;
    return (
      <Grid className="ComparePlayers" container={true} spacing={24}>
        <Grid item={true} xs={12} sm={12}>
          <Helmet>
            <title>{this.getSummary()} - PEShead</title>
          </Helmet>
          <Typography variant="title">Compare players</Typography>
        </Grid>
        <Grid item={true} xs={12} sm={12}>
          <PaperContainer>
            {showPlayerInput ? (
              <PlayerInputContainer><commit_msg>feat(compare) auto focus player search when no other comparisons<commit_after>import { Icon } from 'material-ui';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import { connect, Dispatch } from 'react-redux';
import { push } from 'redux-little-router';
import { createSelector } from 'reselect';

import * as playerActions from '../../actions/players';
import { ComparePlayersLabelColumn } from '../../components/ComparePlayersLabelColumn';
import { ComparePlayersStatColumn } from '../../components/ComparePlayersStatColumn';
import { Loading } from '../../components/Loading';
import { SuggestPlayer } from '../../components/SuggestPlayer';
import * as fromRoot from '../../reducers';
import * as fromPlayers from '../../reducers/players';
import { PlayerCompareOption } from '../../reducers/routing';
import { assert } from '../../shared/assert';
import { Position } from '../../shared/service/api';
import { AbilityFlags, getHighestAbilities } from '../../shared/utils/player';
import { AddButton, PaperContainer, PlayerInputContainer } from './styles';

export interface ViewModel {
  players: PlayerViewModel[];
  position?: Position;
}

export interface State {
  /** Show the "add player" input */
  showPlayerInput: boolean;
}

export interface PlayerViewModel
  extends PlayerCompareOption,
    fromPlayers.BaseViewModel {}

export interface Actions {
  getPlayer: typeof playerActions.getPlayer;
  pushUrl: typeof push;
  dispatch: Dispatch<fromRoot.State>;
}

const createPlayerViewModel = (
  state: fromPlayers.State,
  playerOptions: PlayerCompareOption
): PlayerViewModel => {
  const baseView = fromPlayers.getPlayerBaseView(state, playerOptions.id);
  return {
    ...baseView,
    form: 'A',
    level: 30
  };
};

export class ComparePlayers extends React.PureComponent<ViewModel & Actions> {
  state: State = {
    showPlayerInput: this.props.players.length <= 2
  };

  componentDidMount() {
    this.fetchMissingPlayers(this.props);
  }

  componentWillReceiveProps(nextProps: ViewModel) {
    if (nextProps.players !== this.props.players) {
      this.fetchMissingPlayers(nextProps);
    }
  }

  render() {
    const { players } = this.props;
    const highlights = this.calculateHighlights(players);
    const colWidth = players.length === 3 ? 3 : 4;
    const { showPlayerInput } = this.state;
    return (
      <Grid className="ComparePlayers" container={true} spacing={24}>
        <Grid item={true} xs={12} sm={12}>
          <Helmet>
            <title>{this.getSummary()} - PEShead</title>
          </Helmet>
          <Typography variant="title">Compare players</Typography>
        </Grid>
        <Grid item={true} xs={12} sm={12}>
          <PaperContainer>
            {showPlayerInput ? (
              <PlayerInputContainer>
{'fraction_non_alphanumeric': 0.1383016208597604, 'fraction_numerical': 0.005461592670894996, 'mean_word_length': 3.6229641693811074, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 33, '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': '5436890', 'n_tokens_mistral': 1630, 'n_tokens_neox': 1563, 'n_words': 402}