<!DOCTYPE html>
<!--
Copyright 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/drive/comment_element.html">

<polymer-element name='tr-ui-e-drive-comments-side-panel'
    extends='tr-ui-side-panel'>
  <template>
    <style>
    :host {
      flex-direction: column;
      display: flex;
      width: 290px;
      overflow-y: scroll;
      overflow-x: hidden;
      background-color: #eee;
    }
    toolbar {
      flex: 0 0 auto;
      border-bottom: 1px solid black;
      display: flex;
    }
    result-area {
      flex: 1 1 auto;
      display: block;
      min-height: 0;
      padding: 4px;
    }
    #comments-textarea-container {
      display: flex;
    }
    #commentinput {
      width: 100%;
    }
    </style>

    <toolbar id='toolbar'></toolbar>
    <result-area id='result_area'>
      <template repeat="{{ comment in comments_ }}">
        <tr-ui-e-drive-comment-element comment="{{comment}}"
                         on-click="{{commentClick}}">
        </tr-ui-e-drive-comment-element>
      </template>
      <div id="comments-textarea-container">
        <textarea id="commentinput" on-focus='{{textAreaFocus}}'
            on-blur='{{textAreaBlur}}'
            on-keypress="{{textareaKeypress}}"></textarea>
      </div>
    </result-area>
  </template>

  <script>
  'use strict';

  Polymer({
    ready: function() {
      this.rangeOfInterest_ = new tr.b.Range();
      this.selection_ = undefined;
      this.comments_ = [];
      this.annotationFromComment_ = undefined;
      this.textAreaFocused = false;
    },

    setCommentProvider: function(commentProvider) {
      this.commentProvider_ = commentProvider;
    },

    attached: function() {
      if (this.commentProvider_ === undefined) {
        this.commentProvider_ =
            new tr.ui.e.drive.analysis.DefaultCommentProvider();
      }
      this.commentProvider_.attachToElement(this);
    },

    detached: function() {
      this.commentProvider_.detachFromElement();
    },

    commentClick: function(event, detail, sender) {
      var anchor = sender.comment.anchor;
      if (anchor === undefined)
        return;

      var uiState =
          JSON.parse(anchor).a[0][tr.ui.e.drive.constants.ANCHOR_NAME];

      var myEvent = new CustomEvent('navigateToUIState', { detail:
          new tr.ui.b.UIState(new tr.model.Location(uiState.location.xWorld,
                                                uiState.location.yComponents),
                                                uiState.scaleX)
          });
      document.dispatchEvent(myEvent);

      if (this.annotationFromComment_)
        this.model.removeAnnotation(this.annotationFromComment_);
      var loc = new tr.model.Location(uiState.location.xWorld,
                                  uiState.location.yComponents);

      var text = sender.comment.author.displayName + ': ' +
          sender.comment.content;
      this.annotationFromComment_ =
          new tr.model.CommentBoxAnnotation(loc, text);
      this.model.addAnnotation(this.annotationFromComment_);
    },

    textareaKeypress: function(event, detail, sender) {
      // Check for return key.
      if (event.keyCode === 13 && !event.ctrlKey) {
        this.commentProvider_.addComment(this.$.commentinput.value);
        this.$.commentinput.value = '';
      }
      event.stopPropagation();
      return true;
    },

    textAreaFocus: function(event) {
      this.textAreaFocused = true;
    },

    textAreaBlur: function(event) {
      this.textAreaFocused = false;
    },

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

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

    get currentRangeOfInterest() {
      if (this.rangeOfInterest_.isEmpty)
        return this.model_.bounds;
      else
        return this.rangeOfInterest_;
    },

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

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

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

    updateContents_: function() {
      this.commentProvider_.updateComments();
    },

    supportsModel: function(m) {
      if (m === undefined) {
        return {
          supported: false,
          reason: 'Unknown tracing model'
        };
      }
      return {
        supported: true
      };
    },

    get textLabel() {
      return 'Comments';
    }
  });

  </script>
</polymer-element>