 {div, h2, h3, ul, li, a, p, pre, span} = React.DOM
 el = React.createElement
 
-class ProfilePage.TopRanks extends React.Component
-  constructor: (props) ->
-    @state =
-      limitBest: 5
-      limitFirst: 5
+ProfilePage.TopRanks = React.createClass
+  mixins: [React.addons.PureRenderMixin]
 
-    super props
+  getInitialState: ->
+    limitBest: 5
+    limitFirst: 5
 
 
-  _increaseLimit: (mode) =>
+  _increaseLimit: (mode) ->
     (e) =>
       e.preventDefault()
       stateKey =

      @setState "#{stateKey}": (@state[stateKey] + 5)


  _renderScore: (limit) =>
    (score, i) =>
      modsText =
        if score.mods.length
          " +#{(mod.shortName for mod in score.mods).join(',')} "
        else
          ' '

      topClasses = 'profile-extra-entries__item profile-extra-entries__item--top-ranks'
      if (i + 1) > limit
        topClasses += ' hidden'

      title = "#{score.beatmapSet.data.title} [#{score.beatmap.data.version}]#{modsText}(#{Math.round(score.accuracy * 100, 2)}%)"

      li
        key: score.id
        className: topClasses
        div
          className: 'profile-extra-entries__icon'
          div className: "badge-rank badge-rank--#{score.rank}"

        div className: 'profile-extra-entries__detail profile-extra-entries__detail--vertical',
          div
            className: 'profile-extra-entries__detail-row'
            div
              className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
              a
                href: score.beatmap.data.url
                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--title'
                title: title
                title
            div
              className: 'profile-extra-entries__detail-column'
              span
                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--pp'
                Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.pp))
          div
            className: 'profile-extra-entries__detail-row'
            div
              className: 'profile-extra-entries__detail-column profile-extra-entries__detail-column--full'
              span
                className: 'profile-extra-entries__text-score profile-extra-entries__text-score--time'
                dangerouslySetInnerHTML:
                  __html: osu.timeago score.created_at
            if score.weight != undefined
              div
                className: 'profile-extra-entries__detail-column'
                span
                  className: 'profile-extra-entries__text-score'
                  Lang.get 'users.show.extra.top_ranks.weighted_pp',
                    percentage: "#{Math.round(score.weight.data.percentage)}%"
                    pp: Lang.get('users.show.extra.top_ranks.pp', amount: Math.round(score.weight.data.pp))


  render: =>
    div
      className: 'osu-layout__row osu-layout__row--page profile-extra'
      div className: 'profile-extra__anchor js-profile-page-extra--scrollspy', id: 'top_ranks'

        h3 className: 'profile-extra__title--small', Lang.get('users.show.extra.top_ranks.first.title')
        if @props.scoresFirst && @props.scoresFirst.length
          ul className: 'profile-extra-entries',
            @props.scoresFirst.map (score, i) => @_renderScore(score, i, @state.limitFirst)
            if @state.limitFirst < @props.scoresFirst.length
              li className: 'profile-extra-entries__item profile-extra-entries__item--show-more',
                a href: '#', onClick: @_increaseLimit('first'), 'show more'
