 class ChangesView extends HTMLElement
   createdCallback: ->
     atom.commands.add 'git-experiment-changes-view .data',
-      'core:move-down': => @moveSelectionDown()
-      'core:move-up': => @moveSelectionUp()
+      'core:move-down': =>
+        console.log this
+        @moveSelectionDown()
+      'core:move-up': =>
+        console.log this
+        @moveSelectionUp()
+
+    atom.commands.add 'git-experiment-changes-view atom-text-editor',
+      'core:confirm': (event) =>
+        @commit()
 
     @changes = new GitChanges()
 
     @innerHTML = BaseTemplate
     @unstagedChangesNode = @querySelector('.unstaged.files')
     @stagedChangesNode = @querySelector('.staged.files')
+    @commitNode = @querySelector('.commit')
     @diffsNode = @querySelector('.diffs')
+    @commitMessageNode = @querySelector('atom-text-editor')
+    @commitMessageModel = @commitMessageNode.getModel()
+
+    @commitMessageModel.setSoftWrapped(true)
+    @commitMessageModel.setPlaceholderText(@commitMessageNode.dataset['placeholder'])
+
+    @selectedPath = @selectedState = null
 
     $(@).on 'click', '.change', (e) =>
       el = e.currentTarget
       path = el.dataset['path']
       state = el.dataset['state']
       @renderChangeDetail(path, state)
+
+    $(@).on 'click', '.column-header.unstaged .btn', => @stageAll()
+    $(@).on 'click', '.column-header.staged .btn', => @unstageAll()
+
+    $(window).on 'blur', =>
+      @watch() if atom.workspace.getActivePaneItem() == @
+
+    $(window).on 'focus', =>
+      @renderChanges() if atom.workspace.getActivePaneItem() == @
+      @unwatch()
 
     $(@).on 'click', '.change .btn', (e) =>
       el = $(e.target).closest('.change').get(0)


BaseTemplate = """
  <div class="data" tabindex="-1">
    <div class="unstaged column-header"></div>
    <div class="unstaged files"></div>
    <div class="staged column-header"></div>
    <div class="staged files"></div>
    <div class="commit">

    </div>
  </div>
  <div class="diffs"></div>

           bit & codes.WT_TYPECHANGE

  renderChanges: ->
    @changes.getStatuses().then (statuses) =>
      @stagedChangesNode.innerHTML = ''
      @unstagedChangesNode.innerHTML = ''

      statuses.forEach (status) =>
        if @changeIsUnstaged(status)
          @renderChangeSummary(status, 'unstaged')
