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

<sky-element attributes="icon:string">
<template>
  <style>
    :host {
      display: flex;
      align-items: center;
      height: 48px;
      -webkit-user-select: none;
    }
    #background {
      display: flex;
      align-items: center;
      height: 100%;
      flex: 1;
    }
    #background[highlight] {
      background: rgba(153, 153, 153, 0.4);
    }
    sky-icon {
      padding: 0px 16px;
    }
    #label {
      font-family: 'Roboto Medium', 'Helvetica';
      color: #212121;
      padding: 0px 16px;
      flex: 1;
    }
  </style>
  <div id="background">
    <sky-icon size="24" />
    <div id="label">
      <content />
    </div>
  </div>
</template>
<script>
import "dart:sky";

@Tagname('sky-menu-item')
class SkyMenuItem extends MaterialElement {
  SkyIcon _icon;
  Element _label;

  SkyMenuItem() {
    addEventListener('pointerdown', _handlePointerDown);
    addEventListener('pointerup', _handlePointerUp);
    addEventListener('pointercancel', _handlePointerUp);
  }

  void shadowRootReady() {
    _icon = shadowRoot.querySelector('sky-icon');
    _icon.type = "${icon}_grey600";
  }

  void iconChanged(String oldValue, String newValue) {
    if (_icon != null)
      _icon.type = "${newValue}_grey600";
  }

  void _handlePointerDown(Event event) {
    shadowRoot.getElementById('background').setAttribute('highlight', '');
  }

  void _handlePointerUp(Event event) {
    shadowRoot.getElementById('background').removeAttribute('highlight');
  }
}

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