<!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="/model/compound_event_selection_state.html">
<link rel="import" href="/ui/base/color_scheme.html">
<link rel="import" href="/ui/base/dom_helpers.html">

<!--
@fileoverview A component used to display a label and a color square.

The colored square is typically filled with the color associated with
that label, using the getColorId* methods from base/color_scheme.
-->
<polymer-element name="tr-ui-b-color-legend">
  <template>
    <style>
    :host {
      display: inline-block;
    }

    #square {
      font-size: 150%;  /* Make the square bigger. */
      line-height: 0%;  /* Prevent the square from increasing legend height. */
    }
    </style>
    <span id="square"></span>
    <span id="label"></span>
  </template>
  <script>
  'use strict';

  Polymer({
    ready: function() {
      var blackSquareCharCode = 9632;
      this.$.square.innerText = String.fromCharCode(blackSquareCharCode);
      this.label_ = undefined;

      this.compoundEventSelectionState_ =
          tr.model.CompoundEventSelectionState.NOT_SELECTED;
    },

    set compoundEventSelectionState(compoundEventSelectionState) {
      this.compoundEventSelectionState_ = compoundEventSelectionState;
      // TODO(nduca): Adjust appearance based on associated state.
    },

    get label() {
      return this.label_;
    },

    set label(label) {
      if (label === undefined) {
        this.setLabelAndColorId(undefined, undefined);
        return;
      }

      var colorId = tr.ui.b.getColorIdForGeneralPurposeString(label);
      this.setLabelAndColorId(label, colorId);
    },

    setLabelAndColorId: function(label, colorId) {
      this.label_ = label;

      this.$.label.textContent = '';
      this.$.label.appendChild(tr.ui.b.asHTMLOrTextNode(label));

      if (colorId === undefined) {
        this.$.square.style.color = 'initial';
      } else {
        var paletteRaw = tr.ui.b.getRawColorPalette();
        var color = tr.ui.b.colorToRGBString(paletteRaw[colorId]);
        this.$.square.style.color = color;
      }
    }
  });
  </script>
</polymer-element>