<!DOCTYPE html>
<!--
Copyright (c) 2015 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->

<link rel="import" href="/core/analysis/memory_dump_sub_view_util.html">
<link rel="import" href="/core/analysis/size_span.html">
<link rel="import" href="/core/analysis/table_builder.html">

<polymer-element name="tv-c-memory-dump-details-pane">
  <template>
    <style>
      :host {
        display: flex;
        flex-direction: column;
      }

      #label {
        flex: 0 0 auto;
        padding: 8px;

        background-color: #eee;
        border-bottom: 1px solid #8e8e8e;
        border-top: 1px solid white;

        font-size:  15px;
        font-weight: bold;
      }

      #contents {
        flex: 1 1 auto;
        align-self: stretch;
        font-size: 12px;
      }

      #contents .info-text {
        padding: 8px;
        color: #666;
        font-style: italic;
        text-align: center;
      }
    </style>
    <div id="label">Details</div>
    <div id="contents"></div>
  </template>
  <script>
  'use strict';

  Polymer({
    // TODO(petrcermak): Consider sharing more code between
    // tv-c-memory-dump-overview-pane and tv-c-memory-dump-details-pane
    // (e.g. by defining a common base class tv-c-memory-dump-pane).

    created: function() {
      this.memoryDump_ = undefined;
    },

    ready: function() {
      this.updateContents_();
    },

    set memoryDump(memoryDump) {
      this.memoryDump_ = memoryDump;
      this.updateContents_();
    },

    get memoryDump() {
      return this.memoryDump_;
    },

    updateContents_: function() {
      this.$.contents.textContent = '';

      if (this.memoryDump_ === undefined) {
        var infoText = this.ownerDocument.createElement('div');
        this.$.contents.appendChild(infoText);
        infoText.classList.add('info-text');
        infoText.innerText = 'No details selected';
        return;
      }

      var rows = this.createRows_();
      var columns = this.createColumns_(rows);

      var table = this.ownerDocument.createElement(
          'tracing-analysis-nested-table');
      this.$.contents.appendChild(table);
      table.tableRows = rows;
      table.tableColumns = columns;
      table.rebuild();
    },

    createRows_: function() {
      // TODO(petrcermak): Extend this to other types of memory dumps.
      var createAllocatorRow = function(allocatorDump) {
        var cells = tv.b.mapItems(allocatorDump.attributes,
            function(attrName, attrValue) {
          return new tv.c.analysis.MemoryCell(attrValue);
        });
        var row = {
          title: allocatorDump.name,
          cells: cells
        };
        if (allocatorDump.children.length > 0)
          row.subRows = allocatorDump.children.map(createAllocatorRow);
        return row;
      };
      var rows = [createAllocatorRow(this.memoryDump_)];
      return rows;
    },

    createColumns_: function(rows) {
      var titleColumn = {
        title: 'Allocator',
        value: function(row) {
          return row.title;
        },
        width: '200px',
        cmp: function(rowA, rowB) {
          return rowA.title.localeCompare(rowB.title);
        }
      };

      var attributeColumns = tv.c.analysis.MemoryColumn.fromRows(rows, 'cells');
      tv.c.analysis.MemoryColumn.spaceEqually(attributeColumns);

      var columns = [titleColumn].concat(attributeColumns);
      return columns;
    }
  });
  </script>
</polymer-element>