<!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="/core/find_controller.html">
<link rel="import" href="/core/timeline_track_view.html">

<polymer-element name="tracing-find-control" constructor="TracingFindControl">
  <template>
    <style>
      div.root {
        -webkit-user-select: none;
        display: -webkit-flex;
        position: relative;
      }
      input {
        -webkit-user-select: auto;
        background-color: #f8f8f8;
        border: 1px solid rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
        height: 19px;
        margin-bottom: 1px;
        margin-left: 0;
        margin-right: 0;
        margin-top: 1px;
        padding: 0;
        width: 170px;
      }
      input:focus {
        background-color: white;
      }
      .button {
        background-color: #f8f8f8;
        border: 1px solid rgba(0, 0, 0, 0.5);
        border-left: none;
        font-size: 14px;
        height: 17px;
        margin-left: 0;
        margin-top: 1px;
      }
      .button :first-of-type {
        margin-right: 0;
      }
      #hitCount {
        height: 19px;
        left: 0;
        opacity: 0.25;
        pointer-events: none;
        position: absolute;
        text-align: right;
        top: 2px;
        width: 170px;
        z-index: 1;
      }
      #spinner {
        visibility: hidden;
        width: 8px;
        height: 8px;
        left: 154px;
        pointer-events: none;
        position: absolute;
        top: 4px;
        z-index: 1;

        border: 2px solid transparent;
        border-bottom: 2px solid rgba(0, 0, 0, 0.5);
        border-right: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 50%;

        animation: spin 1s linear infinite;
      }
      @keyframes spin { 100% { transform: rotate(360deg); } }
    </style>

    <div class="root">
      <input type='text' id='filter'
          on-input="{{ filterTextChanged }}"
          on-keypress="{{ filterKeyPress }}"
          on-keydown="{{ filterKeyDown }}"
          on-blur="{{ filterBlur }}"
          on-focus="{{ filterFocus }}"
          on-mouseup="{{ filterMouseUp }}" />
      <div id="spinner"></div>
      <div class="button" on-click="{{ findPrevious }}">&larr;</div>
      <div class="button" on-click="{{ findNext }}">&rarr;</div>
      <div id="hitCount">0 of 0</div>
    </div>
  </template>

  <script>
  'use strict';

  Polymer({
    filterKeyDown: function(e) {
      if (e.keyCode === 27)
        return;

      e.stopPropagation();
      if (e.keyCode !== 13) //
        return;

      e.shiftKey ? this.findPrevious() : this.findNext();
    },

    filterKeyPress: function(e) {
      if (e.keyCode === 27)
        return;
      e.stopPropagation();
    },

    filterBlur: function(e) {
      this.updateHitCountEl();
    },

    filterFocus: function(e) {
      this.controller.reset();
      this.$.filter.select();
    },

    // Prevent that the input text is deselected after focusing the find
    // control with the mouse.
    filterMouseUp: function(e) {
      e.preventDefault();
    },

    get controller() {
      return this.controller_;
    },

    set controller(c) {
      this.controller_ = c;
      this.updateHitCountEl();
    },

    focus: function() {
      this.$.filter.focus();
    },

    get hasFocus() {
      return this === document.activeElement;
    },

    filterTextChanged: function() {
      this.controller.filterText = this.$.filter.value;
      this.$.hitCount.textContent = '';
      this.$.spinner.style.visibility = 'visible';
      this.controller.updateFilterHits().then(function() {
        this.$.spinner.style.visibility = 'hidden';
        this.updateHitCountEl();
      }.bind(this));
    },

    findNext: function() {
      if (this.controller)
        this.controller.findNext();
      this.updateHitCountEl();
    },

    findPrevious: function() {
      if (this.controller)
        this.controller.findPrevious();
      this.updateHitCountEl();
    },

    updateHitCountEl: function() {
      if (!this.controller || !this.hasFocus) {
        this.$.hitCount.textContent = '';
        return;
      }

      var n = this.controller.filterHits.length;
      var i = n === 0 ? -1 : this.controller.currentHitIndex;
      this.$.hitCount.textContent = (i + 1) + ' of ' + n;
    },

    setText: function(string) {
      this.$.filter.value = string;
    }
  });
  </script>
</polymer-element>