<!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="/tracing/model/event_set.html">
<link rel="import" href="/tracing/ui/base/ui.html">
<link rel="import" href="/tracing/ui/brushing_state_controller.html">

<dom-module id='tr-ui-a-analysis-link'>
  <template>
    <style>
    :host {
      display: inline;
      cursor: pointer;
      cursor: pointer;
      white-space: nowrap;
    }
    a {
      text-decoration: underline;
    }
    </style>
    <a href="{{href}}" on-click="onClicked_" on-mouseenter="onMouseEnter_" on-mouseleave="onMouseLeave_"><content></content></a>

  </template>
</dom-module>
<script>
'use strict';

Polymer({
  is: 'tr-ui-a-analysis-link',

  properties: {
    href: {
      type: String
    }
  },

  listeners: {
    'click': 'onClicked_',
    'mouseenter': 'onMouseEnter_',
    'mouseleave': 'onMouseLeave_'
  },

  ready: function() {
    this.selection_ = undefined;
  },

  attached: function() {
    // Save an instance of the controller since it's going to be used in
    // detached() where it can no longer be obtained.
    this.controller_ =
        tr.c.BrushingStateController.getControllerForElement(this);
  },

  detached: function() {
    // Reset highlights.
    this.clearHighlight_();
    this.controller_ = undefined;
  },

  set color(c) {
    this.style.color = c;
  },

  /**
   * @return {*|function():*}
   */
  get selection() {
    return this.selection_;
  },

  /**
   * |selection| can be anything except a function, or else a function that
   * can return anything.
   *
   * In the context of trace_viewer, |selection| is typically an EventSet,
   * whose events will be highlighted by trace_viewer when this link is
   * clicked or mouse-entered.
   *
   * If |selection| is not a function, then it will be dispatched to this
   * link's embedder via a RequestSelectionChangeEvent when this link is
   * clicked or mouse-entered.
   *
   * If |selection| is a function, then it will be called when this link is
   * clicked or mouse-entered, and its result will be dispatched to this
   * link's embedder via a RequestSelectionChangeEvent.
   *
   * @param {*|function():*} selection
   */
  set selection(selection) {
    this.selection_ = selection;
    Polymer.dom(this).textContent = selection.userFriendlyName;
  },

  setSelectionAndContent: function(selection, opt_textContent) {
    this.selection_ = selection;
    if (opt_textContent)
      Polymer.dom(this).textContent = opt_textContent;
  },

  /**
   * If |selection| is a function, call it and return the result.
   * Otherwise return |selection| directly.
   *
   * @return {*}
   */
  getCurrentSelection_: function() {
    // Gets the current selection, invoking the selection function if needed.
    if (typeof this.selection_ === 'function')
      return this.selection_();
    return this.selection_;
  },

  setHighlight_: function(opt_eventSet) {
    if (this.controller_)
      this.controller_.changeAnalysisLinkHoveredEvents(opt_eventSet);
  },

  clearHighlight_: function(opt_eventSet) {
    this.setHighlight_();
  },

  onClicked_: function(clickEvent) {
    if (!this.selection_)
      return;

    clickEvent.stopPropagation();

    var event = new tr.model.RequestSelectionChangeEvent();
    event.selection = this.getCurrentSelection_();
    this.dispatchEvent(event);
  },

  onMouseEnter_: function() {
    this.setHighlight_(this.getCurrentSelection_());
  },

  onMouseLeave_: function() {
    this.clearHighlight_();
  }
});
</script>