<!--
// 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.
-->
<import src="sky-element.sky" />
<import src="sky-icon.sky" />

<sky-element attributes="checked:boolean">
<template>
  <style>
    :host {
      display: inline-block;
      -webkit-user-select: none;
      margin: 8px 16px;
    }
  </style>
  <sky-icon size="18" />
</template>
<script>
import "dart:sky";

const String _kOnIcon = 'toggle/check_box_black';
const String _kOffIcon = 'toggle/check_box_outline_blank_black';

@Tagname('sky-checkbox')
class SkyCheckbox extends SkyElement {
  SkyIcon _icon;

  SkyCheckbox() {
    addEventListener('click', _handleClick);
  }

  void shadowRootReady() {
    _icon = shadowRoot.querySelector('sky-icon');
    _icon.type = checked ? _kOnIcon : _kOffIcon;
  }

  void checkedChanged(bool oldValue, bool newValue) {
    if (_icon != null)
      _icon.type = newValue ? _kOnIcon : _kOffIcon;
  }

  void _handleClick(_) {
    checked = !checked;
  }
}

_init(script) => register(script, SkyCheckbox);
</script>
</sky-element>