<!DOCTYPE html>
<!--
Copyright (c) 2013 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="/perf_insights/function_handle.html">
<link rel="import" href="/perf_insights/mre/mre_result.html">
<link rel="import" href="/tracing/base/utils.html">
<link rel="import" href="/tracing/ui/analysis/generic_object_view.html">
<link rel="import" href="/tracing/ui/base/dom_helpers.html">
<link rel="import" href="/tracing/ui/side_panel/side_panel.html">
<link rel="import" href="/tracing/value/value.html">

<polymer-element name="pi-ui-map-function-side-panel"
                 extends="tr-ui-side-panel">
  <template>
  <style>
  :host {
    display: flex;
    flex-direction: column;
    min-width: 400px;
  }

  #top-nav {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
  }

  #current-map-result {
    display: flex;
    flex: 1 1 auto;
    overflow: auto;
  }
  #current-map-result > * {
    min-width: 0;
    min-height: 0;
  }

  </style>
  <div id="top-nav"></div>
  <div id="current-map-result">
  </div>
  </template>
  <script>
  'use strict';
  Polymer({
    created: function() {
      this.model_ = undefined;
      this.currentMapFunctionTypeInfo_ = undefined;

      // Unused, currently.
      this.rangeOfInterest_ = undefined;
      this.selection_ = undefined;
    },

    ready: function() {
      var functionsByName = pi.FunctionRegistry.allFunctionsByName;
      var mapFunctionOptions = Object.keys(functionsByName).map(
          function(functionName) {
            return {
              label: functionName,
              value: functionsByName[functionName]
            };
          });

      var selector = tr.ui.b.createSelector(
          this, 'currentMapFunctionTypeInfo',
          'perf_insights.map_function_side_panel.mapFunction',
          mapFunctionOptions[0].value,
          mapFunctionOptions);
      this.shadowRoot.querySelector('#top-nav').appendChild(selector);
    },

    get rangeOfInterest() {
      return this.rangeOfInterest_;
    },

    set rangeOfInterest(rangeOfInterest) {
      this.rangeOfInterest_ = rangeOfInterest;
    },

    get selection() {
      return this.selection_;
    },

    set selection(selection) {
      this.selection_ = selection;
    },

    get model() {
      return this.model_;
    },

    set model(model) {
      this.model_ = model;
      this.updateContents_();
    },

    supportsModel: function(m) {
      return {
        supported: true
      };
    },

    get currentMapFunctionTypeInfo() {
      return this.currentMapFunctionTypeInfo_;
    },

    set currentMapFunctionTypeInfo(currentMapFunctionTypeInfo) {
      this.currentMapFunctionTypeInfo_ = currentMapFunctionTypeInfo;
      this.updateContents_();
    },

    updateContents_: function() {
      var mapResultEl = this.shadowRoot.querySelector('#current-map-result');
      mapResultEl.textContent = '';

      if (this.model_ === undefined ||
          this.currentMapFunctionTypeInfo === undefined) {
        return;
      }

      var gov = document.createElement('tr-ui-a-generic-object-view');
      mapResultEl.appendChild(gov);

      var result = new pi.mre.MreResult();
      var canonicalUrl = document.location.toString();

      try {
        this.currentMapFunctionTypeInfo.constructor(result, this.model_);
      } catch (ex) {
        ex = tr.b.normalizeException(ex);
        gov.object = ex.stack;
        return;
      }

      gov.object = results.allValues.map(function(v) {
        return v.asDict();
      });
    },

    get textLabel() {
      return 'MapFunction Debugger';
    }
  });
  </script>
</polymer-element>