<!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="/tracing/ui/extras/rail/ir_verifier_row.html">

<polymer-element name="tr-ui-e-rail-ir-verifier-view">
  <template>
    <style>
    :host {
      display: table;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0px;
    }
    #expected {
      display: none;
    }
    </style>

    <tr-ui-e-rail-ir-verifier-row id="expected"></tr-ui-e-rail-ir-verifier-row>
    <tr-ui-e-rail-ir-verifier-row id="actual"></tr-ui-e-rail-ir-verifier-row>
    <tr-ui-e-rail-ir-verifier-row id="model"></tr-ui-e-rail-ir-verifier-row>
  </template>
  <script>
  'use strict';
  (function() {
    Polymer({
      created: function() {
        this.hasExpectedIRs_ = false;
      },

      ready: function() {
        this.$.actual.labelString = 'Interactions:';
        this.$.model.labelString = 'Model:';
      },

      set bounds(bounds) {
        this.$.expected.bounds = bounds;
        this.$.actual.bounds = bounds;
        this.$.model.bounds = bounds;
      },

      set actualIRs(irs) {
        this.$.actual.events = irs;
      },

      set expectedIRs(irs) {
        // Make getEventColor() for the expectedIRs match the actualIRs:
        irs.forEach(function(eir) {
          if (eir.title === 'Response') {
            eir.railTypeName_ = 'rail_response';
          } else if (eir.title === 'Animation') {
            eir.railTypeName_ = 'rail_animate';
          } else if (eir.title === 'Idle') {
            eir.railTypeName_ = 'rail_idle';
          } else if (eir.title === 'Load') {
            eir.railTypeName_ = 'rail_load';
          }
        });

        this.$.expected.labelString = 'Expected:';
        this.$.actual.labelString = 'Actual:';
        this.$.expected.events = irs;
        this.$.expected.display = 'table-row';
        this.hasExpectedIRs_ = true;
      },

      set model(events) {
        this.$.model.events = events;
      },

      update: function() {
        this.style.width = (window.innerWidth - 30) + 'px';
        if (this.hasExpectedIRs_)
          this.$.expected.update();
        this.$.actual.update();
        this.$.model.update();
      }
    });
  })();
  </script>
</polymer-element>