 Panel = ReactBootstrap.Panel
 Button = ReactBootstrap.Button
+ButtonGroup = ReactBootstrap.ButtonGroup
 Glyphicon = ReactBootstrap.Glyphicon
 Col = ReactBootstrap.Col
 Input = ReactBootstrap.Input
 Label = ReactBootstrap.Label
+PanelGroup = ReactBootstrap.PanelGroup
+Row = ReactBootstrap.Row
 
 update = React.addons.update
+
+SortableButton = React.createClass
+  propTypes:
+    name: React.PropTypes.string.isRequired
+
+  getInitialState: ->
+    ascending: true
+    focused: false
+
+  #TODO: Needs reworked.
+  handleClick: (e) ->
+    if not @state.focused and false
+      @setState update @state,
+        focused: $set: true
+    else
+      @setState update @state,
+        ascending: $set: !@state.ascending
+
+     @props.onSortChange @props.name, !@state.ascending
+
+  render: ->
+    glyph = if @state.ascending then <Glyphicon glyph="chevron-up"/> else <Glyphicon glyph="chevron-down"/>
+    <Button active={@props.active} onClick={@handleClick}>{@props.name} {glyph}</Button>
 
 ProblemFilter = React.createClass
   propTypes:

      </pre>
    </Panel>

ProblemTab = React.createClass
  propTypes:
    problems: React.PropTypes.array.isRequired

  getInitialState: ->
    filterRegex: /.*/

  onFilterChange: (filter) ->
    try


  render: ->
    glyph = <Glyphicon glyph="search"/>
    <Panel>
      <Col xs={12}>
        Search
        <Input type='text' className="form-control"
          ref="filter"
          addonBefore={glyph}
          onChange={@onChange}
          value={@state.filter}/>
      </Col>
      <Col xs={12}>
        <SortableButton name="score" onSortChange={@props.onSortChange}/>
        <SortableButton name="name" onSortChange={@props.onSortChange}/>
        <SortableButton name="category" onSortChange={@props.onSortChange}/>
      </Col>
    </Panel>

ProblemClassifier = React.createClass
  render: ->
    <div/>

Problem = React.createClass
  getInitialState: ->
