/** @jsx etch.dom */
/* eslint react/no-unknown-property: "off" */

import {Disposable, CompositeDisposable} from 'event-kit';

import etch from 'etch';
import {autobind} from 'core-decorators';

import StagingView from './staging-view';
import GitLogo from './git-logo';
import CommitViewController from '../controllers/commit-view-controller';

export default class GitTabView {
  constructor(props) {
    this.props = props;
    etch.initialize(this);
    this.repoCreationInProgress = false;

    this.element.addEventListener('focusin', this.rememberLastFocus);

    this.subscriptions = new CompositeDisposable(
      this.props.commandRegistry.add(this.element, {
        'tool-panel:unfocus': this.blur,
        'core:focus-next': this.advanceFocus,
        'core:focus-previous': this.retreatFocus,
      }),
      new Disposable(() => this.element.removeEventListener('focusin', this.rememberLastFocus)),
    );
  }

  update(props) {
    this.props = props;
    return etch.update(this);
  }

  render() {
    if (this.props.repository.isEmpty()) {
      return (
        <div className="github-Panel" tabIndex="-1">
          <div ref="noRepoMessage" className="github-Panel no-repository">
            <div className="large-icon">
              <GitLogo />
            </div>
            <div className="initialize-repo-description">Initialize this project directory with a Git repository</div>
            <button onclick={this.initializeRepo} disabled={this.repoCreationInProgress} className="btn btn-primary">
              {this.repoCreationInProgress ? 'Creating repository...' : 'Create repository'}
            </button>
          </div>
        </div>
      );
    } else if (this.props.fetchInProgress) {
      return (
        <div className="github-Panel" tabIndex="-1">
          <div ref="repoLoadingMessage" className="github-Panel is-loading">Fetching repository data</div>
        </div>
      );
    } else {
      return (
        <div className="github-Panel" tabIndex="-1">
          <StagingView
            ref="stagingView"
            commandRegistry={this.props.commandRegistry}
            stagedChanges={this.props.stagedChanges}
            unstagedChanges={this.props.unstagedChanges}
            mergeConflicts={this.props.mergeConflicts}
            workingDirectoryPath={this.props.workingDirectoryPath}
            resolutionProgress={this.props.resolutionProgress}
            didSelectFilePath={this.props.didSelectFilePath}
            didSelectMergeConflictFile={this.props.didSelectMergeConflictFile}
            didDiveIntoFilePath={this.props.didDiveIntoFilePath}
            didDiveIntoMergeConflictPath={this.props.didDiveIntoMergeConflictPath}
            openFiles={this.props.openFiles}
            discardWorkDirChangesForPaths={this.props.discardWorkDirChangesForPaths}
            focusFilePatchView={this.props.focusFilePatchView}
            attemptFileStageOperation={this.props.attemptFileStageOperation}
            undoLastDiscard={this.props.undoLastDiscard}
            abortMerge={this.props.abortMerge}
            resolveAsOurs={this.props.resolveAsOurs}
            resolveAsTheirs={this.props.resolveAsTheirs}
            lastCommit={this.props.lastCommit}
            isAmending={this.props.isAmending}
            hasUndoHistory={this.props.hasUndoHistory}
            isMerging={this.props.isMerging}
          />
          <CommitViewController
            ref="commitViewController"
            stagedChangesExist={this.props.stagedChanges.length > 0}
            mergeConflictsExist={this.props.mergeConflicts.length > 0}
            prepareToCommit={this.props.prepareToCommit}
            commit={this.props.commit}
            amending={this.props.amending}
            setAmending={this.props.setAmending}
            abortMerge={this.props.abortMerge}
            branchName={this.props.branchName}
            commandRegistry={this.props.commandRegistry}
            mergeMessage={this.props.mergeMessage}
            isMerging={this.props.isMerging}
            isAmending={this.props.isAmending}
            lastCommit={this.props.lastCommit}
            repository={this.props.repository}
          />
        </div>
      );
    }
  }

  destroy() {
    this.subscriptions.dispose();
    return etch.destroy(this);
  }

  @autobind
  async initializeRepo(event) {
    event.preventDefault();
    this.repoCreationInProgress = true;
    etch.update(this);
    try {
      await this.props.initializeRepo();
    } finally {
      this.repoCreationInProgress = false;
      etch.update(this);
    }
  }

  @autobind
  blur() {
    this.props.workspace.getActivePane().activate();
  }

  @autobind
  rememberLastFocus(event) {
    this.lastFocus = event.target;
  }

  @autobind
  advanceFocus() {
    if (!this.refs.stagingView.activateNextList()) {
      this.refs.commitViewController.focus();
    }
  }

  @autobind
  retreatFocus() {
    const {stagingView, commitViewController} = this.refs;

    if (commitViewController.isFocused()) {
      if (stagingView.activateLastList()) {
        stagingView.focus();
      }
    } else {
      stagingView.activatePreviousList();
    }
  }

  focus() {
    // Default focus to the staging view. Fall back to the panel root.
    if (!this.lastFocus) {
      this.lastFocus = this.refs.stagingView || this.element;
    }

    this.lastFocus.focus();
  }

  async focusAndSelectStagingItem(filePath, stagingStatus) {
    await this.refs.stagingView.quietlySelectItem(filePath, stagingStatus);
    this.refs.stagingView.focus();
  }

  isFocused() {
    return this.element === document.activeElement || this.element.contains(document.activeElement);
  }

  @autobind
  quitelySelectItem(filePath, stagingStatus) {
    return this.refs.stagingView.quietlySelectItem(filePath, stagingStatus);
  }
}

@@ -187,16 +187,45 @@
 rators';
+%0Aimport cx from 'classnames';
 %0A%0Aimport
@@ -1125,32 +1125,41 @@
 me=%22github-Panel
+ is-empty
 %22 tabIndex=%22-1%22%3E
@@ -1728,109 +1728,114 @@
 lse 
-if (this.props.fetchInProgress) %7B%0A      return (%0A        %3Cdiv className=%22github-Panel%22 tabIndex=%22-1%22%3E
+%7B%0A      const isLoading = this.props.fetchInProgress %7C%7C this.props.repository.isLoading();%0A%0A      return (
 %0A   
@@ -1843,39 +1843,12 @@
     
-  
 %3Cdiv
- ref=%22repoLoadingMessage%22
  cla
@@ -1846,33 +1846,37 @@
  %3Cdiv className=
-%22
+%7Bcx('
 github-Panel is-
@@ -1871,17 +1871,21 @@
 ub-Panel
- 
+', %7B'
 is-loadi
@@ -1890,130 +1890,23 @@
 ding
-%22%3EFetching repository data%3C/div%3E%0A        %3C/div%3E%0A      );%0A    %7D else %7B%0A      return (%0A        %3Cdiv className=%22github-Panel%22
+': isLoading%7D)%7D
  tab
@@ -3133,32 +3133,77 @@
 ops.lastCommit%7D%0A
+            isLoading=%7Bthis.props.isLoading%7D%0A
             isAm
@@ -4031,32 +4031,77 @@
 ops.isAmending%7D%0A
+            isLoading=%7Bthis.props.isLoading%7D%0A
             last

Apply .is-loading to the panel when loading