'use babel';
/**
  Stack Explorer Component
  @description Creates a tabbed side panel that displays information about
    the program's stacks, has the following tabs:
      - Stacktrace: show the stacktrace @ the current source line
      - Goroutines: show the running goroutines @ the current source line
      - Variables: shows the variables in the current scope
      - Breakpoints: view breakpoints and deactivate them

    Should be able to click on stack/goroutine frames and go to the source,
    and should be able to do the same for breakpoints
**/

import { CompositeDisposable } from 'atom';
import { BreakpointStore, DebuggerStateStore as StateStore } from '../stores';

export default class StackExplorerPanel {
  constructor() {
    this.disposables = new CompositeDisposable();
    this.element = null;
    this.$selectedTab = null;

    // Register Flux Stores
    this._stateStoreRm = StateStore
    .addListener(this.updateStack.bind(this)).remove;

    this._bpStoreRm = BreakpointStore
    .addListener(this.updateBreakpoints.bind(this)).remove;

    this.render();
  }

  render() {
    let $panelContainer = document.createElement('div');
    this._$panelContainer = $panelContainer;

    $panelContainer.classList.add('delve-stack-panel');
    $panelContainer.appendChild(this.buildTabBar());

    this.element = atom.workspace.addRightPanel({
      item: $panelContainer,
      priority: 200
    });
  }

  buildTabBar() {
    let $tabBar = document.createElement('ul');
    $tabBar.classList.add('tab-container');

    let $stackTab = document.createElement('li');
    $stackTab.classList.add('tab');
    $stackTab.classList.add('stacktrace-tab');
    $stackTab.innerHTML = '<h1>Stacktrace</h1>';
    $tabBar.appendChild($stackTab);

    let $grTab = document.createElement('li');
    $grTab.classList.add('tab');
    $grTab.classList.add('goroutine-tab');
    $grTab.innerHTML = '<h1>Goroutines</h1>';
    $tabBar.appendChild($grTab);

    let $varTab = document.createElement('li');
    $varTab.classList.add('tab');
    $varTab.classList.add('variables-tab');
    $varTab.innerHTML = '<h1>Variables</h1>';
    $tabBar.appendChild($varTab);

    let $bpTab = document.createElement('li');
    $bpTab.classList.add('tab');
    $bpTab.classList.add('breakpoints-tab');
    $bpTab.innerHTML = '<h1>Breakpoints</h1>';
    $tabBar.appendChild($bpTab);

    // Default active is stacktrace
    $stackTab.classList.add('active');
    this.$selectedTab = $stackTab;

    for (let i = 0; i < $tabBar.children.length; i++) {
      const $tab = $tabBar.children[i];
      $tab.addEventListener('click', () => {
        $tab.classList.add('active');
        if (this.$selectedTab) this.$selectedTab.classList.remove('active');
        this.$selectedTab = $tab;
      });
    }

    return $tabBar;
  }

  updateStack() {}
  updateBreakpoints() {}

  destroy() {
    this._stateStoreRm();
    this._bpStoreRm();

    if (this.element) this.element.destroy();
  }
}

@@ -844,16 +844,143 @@
  = null;
+%0A    this.state = null;%0A    this.stacktrace = %5B%5D;%0A    this.goroutines = %5B%5D;%0A    this.variables = %5B%5D;%0A    this.breakpoints = %5B%5D;
 %0A%0A    //
@@ -1068,18 +1068,18 @@
 pdateSta
-ck
+te
 .bind(th
@@ -2957,39 +2957,243 @@
 eSta
-ck() %7B%7D%0A  updateBreakpoints() %7B
+te() %7B%0A    this.stacktrace = StateStore.getStacktrace();%0A    this.state = StateStore.getState();%0A    this.goroutines = StateStore.getGoroutines();%0A  %7D%0A%0A  updateBreakpoints() %7B%0A    this.breakpoints = BreakpointStore.getBreakpoints();%0A  
 %7D%0A%0A 

Add props for state details, impl updating fn