<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="action_link.html">
<link rel="import" href="function_ref.html">
<link rel="import" href="script_inset.html">
<link rel="import" href="script_ref.html">
<polymer-element name="isolate-summary">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <div class="flex-row">
      <div>
        <isolate-ref ref="{{ isolate }}"></isolate-ref>
      </div>
      <div style="flex:1"></div>
      <div>
        <isolate-run-state isolate="{{ isolate }}"></isolate-run-state>
        <isolate-location isolate="{{ isolate }}"></isolate-location>
        [<a on-click="{{ goto }}" _href="{{ gotoLink('/debugger', isolate) }}">debug</a>]
      </div>
    </div>
    <br>
    <isolate-shared-summary isolate="{{ isolate }}"></isolate-shared-summary>
  </template>
</polymer-element>

<polymer-element name="isolate-run-state">
  <template>
    <template if="{{ isolate.paused }}">
      <strong title="{{ isolate.pauseEvent.timestamp.toString() }}">paused</strong>
    </template>

    <template if="{{ isolate.running }}">
      <strong>running</strong>
    </template>

    <template if="{{ isolate.idle }}">
      <strong>idle</strong>
    </template>

    <template if="{{ isolate.loading }}">
      <strong>loading...</strong>
    </template>
  </template>
</polymer-element>

<polymer-element name="isolate-location">
  <template>
    <template if="{{ isolate.pauseEvent != null }}">
      <template if="{{ isolate.pauseEvent.kind == 'PauseStart' }}">
        at isolate start
      </template>

      <template if="{{ isolate.pauseEvent.kind == 'PauseExit' }}">
        at isolate exit
      </template>

      <template if="{{ isolate.pauseEvent.kind == 'None' }}">
        not yet runnable
      </template>

      <template if="{{ isolate.pauseEvent.kind == 'PauseInterrupted' ||
                       isolate.pauseEvent.kind == 'PauseBreakpoint' ||
                       isolate.pauseEvent.kind == 'PauseException' }}">
        <template if="{{ isolate.pauseEvent.breakpoint != null }}">
          by breakpoint
        </template>
        <template if="{{ isolate.pauseEvent.kind == 'PauseException' }}">
          by exception
        </template>
        <template if="{{ isolate.topFrame != null }}">
          at
          <function-ref ref="{{ isolate.topFrame.function }}">
          </function-ref>
          (<source-link location="{{ isolate.topFrame.location }}">
          </source-link>)
        </template>
      </template>
    </template>

    <template if="{{ isolate.running }}">
      at
      <function-ref ref="{{ isolate.topFrame.function }}">
      </function-ref>
      (<source-link location="{{ isolate.topFrame.location }}"></source-link>)
    </template>

  </template>
</polymer-element>

<polymer-element name="isolate-shared-summary">
  <template>
    <style>
      .errorBox {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        padding: 2em;
        font-family: consolas, courier, monospace;
        font-size: 1em;
        line-height: 1.2em;
        white-space: pre;
      }
    </style>
    <link rel="stylesheet" href="css/shared.css">
    <template if="{{ isolate.error != null }}">
      <div class="content-centered">
        <pre class="errorBox">{{ isolate.error.message }}</pre>
        <br>
      </div>
    </template>
    <div class="flex-row">
      <div style="flex:2">
        <isolate-counter-chart counters="{{ isolate.counters }}"></isolate-counter-chart>
      </div>
      <div style="flex:1">
        <div class="memberList">
          <div class="memberItem">
            <div class="memberName">new heap</div>
            <div class="memberValue">
              {{ isolate.newSpace.used | formatSize }}
              of
              {{ isolate.newSpace.capacity | formatSize }}
            </div>
          </div>
          <div class="memberItem">
            <div class="memberName">old heap</div>
            <div class="memberValue">
              {{ isolate.oldSpace.used | formatSize }}
              of
              {{ isolate.oldSpace.capacity | formatSize }}
            </div>
          </div>
        </div>
        <br>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/debugger', isolate) }}">debugger</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/class-tree', isolate) }}">class hierarchy</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/profiler', isolate) }}">cpu profile</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/profiler-table', isolate) }}">cpu profile (table)</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/allocation-profiler', isolate) }}">allocation profile</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/heap-map', isolate) }}">heap map</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/metrics', isolate) }}">metrics</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/heap-snapshot', isolate) }}">heap snapshot</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/persistent-handles', isolate) }}">persistent handles</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/ports', isolate) }}">ports</a>
          </div>
        </div>
        <div class="memberItem">
          <div class="memberValue">
            See <a on-click="{{ goto }}" _href="{{ gotoLink('/logging', isolate) }}">logging</a>
          </div>
        </div>
        <!-- Temporarily disabled until UI for dart:io is acceptable.
        <template if="{{ isolate.ioEnabled }}">
          <div class="memberItem">
            <div class="memberValue">
              See <a on-click="{{ goto }}" href="{{ gotoLink('/io', isolate) }}">dart:io</a>
            </div>
          </div>
        </template>
        -->
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="isolate-counter-chart">
  <template>
    <link rel="stylesheet" href="../../../../packages/charted/charts/themes/quantum_theme.css">
    <style>
.chart-wrapper {
}
.chart-host-wrapper {
  display: flex;
  flex-direction: row;
  max-height: 250px;
}
.chart-host {
  flex: 1;
}
.chart-legend-host {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
}
    </style>
    <div class="chart-wrapper" id="isolate-counter-chart">
      <div class="chart-host-wrapper">
        <div class="chart-host" id="isolate-counter-chart-host"></div>
        <div class="chart-legend-host" id="isolate-counter-chart-legend-host"></div>
      </div>
  </div>
  </template>
</polymer-element>

<script type="application/dart" src="isolate_summary.dart"></script>