<!--
  The fuzzer/res/fuzzer.js file must be included before this file.

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <fuzzer-collapse-details-sk>

  To use this file import it:

    <link href="/res/imp/fuzzer-collapse-details-sk.html" rel="import" />

  Usage:

    <fuzzer-collapse-details-sk></fuzzer-collapse-details-sk>

  Properties:
    details - The details object.  Expected to have the following attributes:
      lineNumber: Number,
      count: Number, The full number of reports.
      reports: Array of Reports. If non-empty,
        an expandable details panel will be created containing representations of the reports.
        If empty, just the summary will be shown.
        Reports are objects and have the following attributes:
        - name: String, The name of the binary, likely an md5 hash
        - type: String, The type of the binary
        - flags: map of String -> Array<String>, Flags associated with a given config
            (e.g. TerminatedGracefully)
        - stacktraces map of String -> Object, Stacktrace associated with config
            (see fuzzer-stacktrace-sk.html for schema)
        - category: String.
    detailsBase: String, the base url for details (should include file and function name)
    expand: Boolean, if this element should be auto expanded.

  Methods:
    setDetails(details) - Programmatically set the details object.
    showMore() - Programmatically show up to 6 more details panels.
    showFewer() - Programmatically show up to 6 fewer details panels.

  Events:
    None.
  -->
<link rel="import" href="/res/common/imp/details-summary.html">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="fuzzer-stacktrace-sk.html">
<dom-module id="fuzzer-collapse-details-sk">
  <template>
    <style include="iron-flex iron-flex-alignment">
    #wrapper {
      padding: 16px;
      border-radius: 8px;
      background-color: #DEDEDE;
      color: #000000;
    }

    .panel-container .title {
      margin-top: .5em;
      font-weight: bold;
      font-size: 1.1em;
    }

    .panel {
      min-width: 100px;
      background-color: lightblue;
      border-radius: 6px;
      margin: 4px;
      padding: 5px;
    }

    .flags {
      max-width: 600px;
    }

    .raw {
      font-size: 0.7em;
      display: inline-block;
    }

    .show-more-less-bar {
      width: 100%;
      background-color: white;
      border-radius: 8px;
    }

    .center {
      margin: auto;
    }
    </style>
    <div id="wrapper">
      <li>
        <details-sk open="[[expand]]">
          <summary-sk>
            <a href$="[[_getDetailsLink(detailsBase, details)]]">Line [[details.lineNumber]]</a>
          -- [[details.count]] crash-causing fuzzes
          </summary-sk>
          <div class="panel-container horizontal layout wrap start">
            <template is="dom-repeat" items="[[reports]]" as="report">
              <div class="panel">
                <div class="title">
                File:
                <a href$="[[_getDownloadLink(report)]]">[[report.fuzzName]]</a>
                &nbsp;
                <a href$="[[_getPermaLink(report)]]"><iron-icon icon="icons:link" title="permalink"></iron-icon></a>
                &nbsp;
                <a href$="[[_getNewBugLink(report)]]" target="_blank"><iron-icon icon="icons:bug-report" title="file a bug about this fuzz"></iron-icon></a>
                </div>
                <div class="raw">
                  <a href$="[[_getMetaLink(report,'debug','asan')]]">debug_asan</a>
                  <a href$="[[_getMetaLink(report,'release','asan')]]">release_asan</a>
                  <a href$="[[_getMetaLink(report,'debug','err')]]">debug_err</a>
                  <a href$="[[_getMetaLink(report,'release','err')]]">release_err</a>
                  <a href$="[[_getMetaLink(report,'debug','dump')]]">debug_dump</a>
                  <a href$="[[_getMetaLink(report,'release','dump')]]">release_dump</a>
                </div>
                <div class="flags">[[_getFlags(report)]]</div>
                <div><b>OS/Architecture:</b> [[report.architecture]]</div>
                <h4>Debug Stack Trace</h4>
                <fuzzer-stacktrace-sk trace="[[_stacktrace(report, 'ASAN_DEBUG', 'CLANG_DEBUG')]]"></fuzzer-stacktrace-sk>
                <h4>Release Stack Trace</h4>
                <fuzzer-stacktrace-sk trace="[[_stacktrace(report, 'ASAN_RELEASE', 'CLANG_RELEASE')]]"></fuzzer-stacktrace-sk>
              </div>
            </template>
            <div class="show-more-less-bar horizontal layout">
              <paper-button disabled$="[[!hasFewer]]" on-click="showFewer">Show Fewer</paper-button>
              <span class="status horizontal layout flex">
                <span class="center">Showing [[toShow]]/
                  [[details.count]]</span>
              </span>
              <paper-button disabled$="[[!hasMore]]" on-click="showMore">Show More</paper-button>
            </div>
          </div>
        </details-sk>
      </li>
    </div>
  </template>
  <script>
  (function(){
    var FLAG_ORDER=["ASAN_DEBUG", "CLANG_DEBUG", "ASAN_RELEASE", "CLANG_RELEASE"];
  Polymer({
    is: 'fuzzer-collapse-details-sk',

    properties: {
      details: { // expected to be provided
        type: Object,
        value: function() {
          return {};
        }
      },
      expand: {
        type: Boolean,
        value: false,
      },
      // detailsBase is the base url to the details page for the parent element.
      // We will use fuzzer.getLinkToDetails() to append the line information to the link.
      detailsBase: {
        type: String,
        value: ""
      },
      // The number of detail panels to show
      toShow: {
        type: Number,
        value: 0,
        readOnly: true,
      },
      // Returns true if there are more detail panels to show
      hasMore: {
        type: Boolean,
        computed: "_hasMore(details, toShow)"
      },
      // Returns true if there are not 0 detail panels currently displayed.
      hasFewer: {
        type: Boolean,
        computed: "_hasFewer(toShow)"
      },
      // Returns the amount of detail panels equal to 'toShow'
      reports: {
        type: Array,
        computed: "_getSomeReports(details, toShow)",
      },
    },

    ready: function() {
      if (this.details.reports) {
        this._setToShow(Math.min(6, this.details.reports.length));
      }
    },

    setDetails: function(details) {
      this.details = details;
      this._setToShow(Math.min(6, this.details.reports.length));
    },

    _getFlags: function(report) {
      let s = "";
      for (let c of FLAG_ORDER) {
        let flags = report.flags[c] || ["<none>"];
        s += `${c} -> (${flags.join(" | ")}) `;
      }
      return s;
    },

    showMore: function() {
      this._setToShow(Math.min(this.toShow + 6, this.details.reports.length));
    },

    showFewer: function() {
      this._setToShow(Math.max(this.toShow - 6, 0));
    },

    _hasMore: function(details, toShow) {
      return details.reports && toShow < details.reports.length;
    },

    _hasFewer: function(toShow) {
      return toShow > 0;
    },

    // _getSomeReports returns up to {{toShow}} reports from details
    _getSomeReports: function(details, toShow) {
      if (!details.reports) {
        return [];
      }
      if (toShow > details.reports.length) {
        return details.reports;
      }
      return details.reports.slice(0, toShow);
    },

    _getDownloadLink: function(report) {
      return "/fuzz/" + report.fuzzName;
    },

    _getMetaLink: function(report, build, extension) {
      var name = report.fuzzName +"_" + build +"." + extension;
      return "/metadata/" + name;
    },

    _getDetailsLink: function(detailsBase, details) {
      return fuzzer.getLinkToDetails(detailsBase, 'line', details.lineNumber);
    },

    _getPermaLink: function(report) {
      return "/category/"+report.category + "/name/" + report.fuzzName;
    },

    _getNewBugLink: function(report) {
      return "/newBug?name=" + report.fuzzName + "&category="+report.category;
    },

    _stacktrace: function(report, stackA, stackB) {
      if (report.stacktraces[stackA].frames) {
        return report.stacktraces[stackA];
      }
      return report.stacktraces[stackB];
    }
  });
  })()
  </script>
</dom-module>