<!DOCTYPE html>
<!--
Copyright (c) 2016 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/base/checkbox.html">
<link rel="import" href="/tracing/ui/base/ui.html">

<polymer-element name='tr-ui-b-checkbox-picker'>
  <template>
    <style>
    #container {
      display: flex;
      flex-direction: column;
    }
    </style>

    <div id="container">
    </div>

  </template>

  <script>
  'use strict';

  Polymer({
    created: function() {
      this.needsInit_ = true;
      this.settingsKey_ = undefined;
      this.is_ready_ = false;
      this.checkboxes_ = undefined;
    },

    ready: function() {
      this.is_ready_ = true;
      this.maybeInit_();
      this.maybeRenderCheckboxes_();
    },

    get settingsKey() {
      return this.settingsKey_;
    },

    set settingsKey(settingsKey) {
      if (!this.needsInit_)
        throw new Error('Already initialized.');
      this.settingsKey_ = settingsKey;
      this.maybeInit_();
    },

    maybeInit_: function() {
      if (!this.needsInit_)
        return;
      if (this.settingsKey_ === undefined)
        return;
      if (this.checkboxes_ === undefined)
        return;

      this.needsInit_ = false;

      for (var key in this.checkboxes_) {
        this.checkboxes_[key].defaultCheckedValue = false;
        this.checkboxes_[key].settingsKey = this.settingsKey_ + key;
      }
    },

    set items(items) {
      this.checkboxes_ = {};
      items.forEach(function(e) {
        if (e.key in this.checkboxes_)
          throw new Error(e.key + ' already exists');
        var checkboxEl = document.createElement('tr-ui-b-checkbox');
        checkboxEl.label = e.label;
        this.checkboxes_[e.key] = checkboxEl;
      }.bind(this));
      this.maybeInit_();
      this.maybeRenderCheckboxes_();
    },

    maybeRenderCheckboxes_: function() {
      if (!this.is_ready_)
        return;
      if (this.checkboxes_ === undefined)
        return;
      for (var key in this.checkboxes_)
        this.$.container.appendChild(this.checkboxes_[key]);
    },

    selectCheckbox: function(key) {
        if (!(key in this.checkboxes_))
          throw new Error(key + ' does not exists');
        this.checkboxes_[key].checked = true;
    },

    unselectCheckbox: function(key) {
        if (!(key in this.checkboxes_))
          throw new Error(key + ' does not exists');
        this.checkboxes_[key].checked = false;
    },

    get checkedKeys() {
      return Object.keys(this.checkboxes_).filter(function(k) {
        return this.checkboxes_[k].checked;
      }.bind(this));
    },

  });
  </script>
</polymer-element>