<!-- The <op-sk> custom element declaration.

  Attributes:
    op - A deserialized JSON object that describes the operation.

    Presumes ops are structured as below, where the "details" will
    change based on the name of the opertion.

      {
        details: {
          visible: true,
          command: "line",
          ...,
        }
        _zoom: "1:4",
        _index: 1,
        _depth: 1,
      }

    selected - True if this op has been selected.

    index - The index of this command.

    prefix - An array of icons and their color to display
      before the command name. The look like:

       {
         icon: "icons:image",
         color: "green",
         count: 2,
       }

       The count is the run-length encoding, ie. the number
       of repetitions of that operation that appear.

  Events:
    op-toggled - This event is sent when a paper-checkbox is toggled.
        The checked status and index of the op are returned in e.detail.

        {
          checked: false,
          index: 102,
        }

    op-zoom - This event is sent when the zoom button is clicked.
      The range to zoom to is returned in the detail as a filter
      string.

        "2:7"

  Methods:
    None.
-->

<link rel=import href="/res/imp/bower_components/paper-checkbox/paper-checkbox.html">
<link rel=import href="/res/imp/bower_components/iron-icon/iron-icon.html">
<link rel=import href="/res/imp/bower_components/iron-icons/image-icons.html">
<link rel=import href="/res/imp/bower_components/iron-icons/iron-icons.html">
<link rel=import href="/res/common/imp/details-summary.html">
<dom-module id="op-sk">
  <style type="text/css" media="screen">
    details-sk {
      display: block;
    }

    .zoom {
      display: none;
      font-size: 12px;
      padding: 0;
      margin: 0 1em;
    }

    :host:hover .zoom {
      display: inline-block;
    }

    :host:hover details-sk {
      background-color: #eeffee;
    }

    details-sk[selected] {
      background: #eee;
    }

    pre {
      margin-left: 3em;
    }

    iron-icon {
      opacity: 0.7;
      margin-left: -8px;
    }

    details-sk div {
      margin-left: 2em;
    }

    summary-sk {
      display: block;
      margin-left: 2.5em;
      margin-top: -2.5em;
    }

    .gpuOpID {
      float: right;
      background: #1B9E77;
      color: white;
      border-radius: 5px;
      padding: 0.2em 0.4em;
      margin-right: 0.5em;
      margin-top: -0.05em;
    }

    .count {
      margin-left: -0.7em;
      font-weight: bold;
      top: 0.5em;
      position: relative;
    }

  </style>
  <template>
    <details-sk selected$="{{ selected }}">
      <summary-sk id=summary><paper-checkbox id=toggle checked$="{{ op.details.visible }}" on-tap="_check"></paper-checkbox>
        <template is="dom-repeat" items="{{ prefix }}">
          <iron-icon icon="{{ item.icon }}" style$="color: {{ item.color }};"> </iron-icon>
          <template is="dom-if" if="{{ _gt1(item.count) }}">
            <span class=count>{{ item.count }}</span>
          </template>
        </template>
        <span>{{ op.details.command }}</span>
        <template is="dom-if" if="{{ op._zoom }}">
          <button class=zoom on-tap=_zoom>Zoom</button>
        </template>
        <code>{{op.details.shortDesc }}</code>
        <template is="dom-repeat" items="{{ _fixList(op.details.auditTrail.Ops) }}" as=gpuOp>
          <span class=gpuOpID style$="background: {{ _bgColor(gpuOp.OpListID) }}">{{ _smartNumber(gpuOp.OpListID) }}</span>
        </template>
      </summary-sk>
      <div>
        <strong>Index: </strong> <span id=index>{{ index }}</span>
      </div>
      <pre>
{{ _display(op) }}
      </pre>
    </details-sk>
  </template>
</dom-module>

<script>
  (function () {
    var colors = [
      "#1B9E77",
      "#D95F02",
      "#7570B3",
      "#E7298A",
      "#66A61E",
      "#E6AB02",
      "#A6761D",
      "#666666"
    ];

    Polymer({
      is: "op-sk",

      properties: {
        op: {
          type: Object,
          value: function() { return {}; },
          reflectToAttribute: false,
        },
        selected: {
          type: Boolean,
          value: false,
          reflectToAttribute: false,
        },
        index: {
          type: Number,
          value: 0,
          reflectToAttribute: true,
        },
        prefix: {
          type: Array,
          value: function() { return []; },
          reflectToAttribute: false,
        },
      },

      _display: function(op) {
        return JSON.stringify(op.details, null, 2);
      },

      _check: function(e) {
        var detail = {
          checked: this.$.toggle.checked,
          index: this.index,
        };
        this.dispatchEvent(new CustomEvent('op-toggled', { detail: detail, bubbles: true }));
        e.stopPropagation();
      },

      _smartNumber: function(index) {
        if (index == -1) {
          return "...";
        } else {
          return index;
        }
      },

      _bgColor: function(index) {
        if (index == -1) {
          return "black";
        } else {
          return colors[index % colors.length];
        }
      },

      _fixList: function(list) {
        if (!list) {
          return
        }
        var ret = list.slice();
        ret.reverse();
        if (ret.length > 4) {
          ret = [ret[0], ret[1], { OpListID: -1 }, ret[ret.length-2], ret[ret.length-1]];
        }
        return ret;
      },

      _gt1: function(n) {
        return n > 1;
      },

      _zoom: function(e) {
        this.dispatchEvent(new CustomEvent('op-zoom', { detail: this.op._zoom, bubbles: true }));
        e.stopPropagation();
      },

    });
  })();
</script>