<!--
// 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/framework/elements/sky-box.sky" />
<import src="/sky/framework/elements/sky-button.sky" />
<import src="/sky/framework/elements/sky-checkbox.sky" />
<import src="/sky/framework/elements/sky-element.sky" />
<import src="/sky/framework/elements/sky-input.sky" />
<import src="/sky/framework/elements/sky-radio.sky" />
<import src="/sky/framework/elements/sky-scrollable.sky" />
<sky-element>
<template>
  <style>
  :host {
    font-family: 'Roboto Regular', 'Helvetica';
  }
  div {
    display: flex;
    align-items: center;
  }
  sky-checkbox {
    margin: 5px;
  }
  .output {
    margin-left: 48px;
  }
  sky-scrollable {
    height: -webkit-fill-available;
  }
  </style>
  <sky-scrollable>
    <sky-box title='Text'>
      <sky-input id="text" value="{{ inputValue }}" />
      <div>value = {{ inputValue }}</div>
    </sky-box>

    <sky-box title='Buttons'>
      <div style="display: flex; flex-direction: horizontal">
        <div style="flex:1" />
        <sky-button level="1" id="button">CANCEL</sky-button>
        <sky-button level="1" primary>CONFIRM</sky-button>
      </div>
    </sky-box>

    <sky-box title='Checkboxes'>
      <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
      <div class="output">highlight: {{ myCheckbox.highlight }}</div>
      <div class="output">checked: {{ myCheckbox.checked }}</div>
      <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
      <div class="output">checked: {{ checked }}</div>
    </sky-box>

    <sky-box title='Radios'>
      <sky-box title='Group One'>
        <div><sky-radio group='foo'/>one</div>
        <div><sky-radio group='foo' selected='true' />two</div>
        <div><sky-radio group='foo'/>three</div>
      </sky-box>
      <sky-box title='Group Two'>
        <div><sky-radio group='bar'/>A</div>
        <div><sky-radio group='bar'/>B</div>
        <div><sky-radio group='bar' selected='true' />C</div>
      </sky-box>
    </sky-box>
  </sky-scrollable>
</template>
<script>
import "dart:sky";

@Tagname('widget-root')
class WidgetRoot extends SkyElement {
  Element _button;
  Element _checkbox;
  Element _text;
  int _clickCount = 0;
  String _inputValue = "Ready";
  bool _checked = false;

  void shadowRootReady() {
    _button = this.shadowRoot.getElementById('button');
    _checkbox = this.shadowRoot.getElementById('checkbox');
    _text = this.shadowRoot.getElementById('text');

    _button.addEventListener('click', _handleClick);
  }

  void _handleClick(_) {
    _clickCount++;
    _checked = !_checked;
    _inputValue = "Moar clicking ${_clickCount}";
  }
}

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