<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="app-grid-style.html">
<dom-module id="my-bluegrey">
	<template>
		<style include="app-grid-style">
		</style>
    <style include="shared-styles">
      :host {
        display: block;
      }
    </style>
		<paper-toast id="copyToast" text="Copied to clipboard!"></paper-toast>
		<iron-ajax auto
			url="data/bluegrey.json"
			id="ajax"
			loading="{{loading}}"
			handle-as="json"
			last-error="{{error}}"
			last-response="{{ajaxResponse}}">
		</iron-ajax>
		<template is="dom-if" if="{{loading}}">
			<div class="actions flex-center-center" hidden$="[[!loading]]">
				<paper-spinner-lite active$="[[loading]]"></paper-spinner-lite>
			</div>
		</template>
		<template is="dom-if" if="{{error}}">
			<div class="error">
				<div>Failed to load feeds.</div>
				<div>Make sure you're connected to internet.</div>
				<a href="javascript:location.reload();"><paper-icon-button icon="my-icons:refresh"></paper-icon-button></a>
			</div>
    </template>
		<paper-listbox selected="" attr-for-selected="id" class="listbox" role="listbox">
			<template is="dom-repeat" items="[[ajaxResponse]]">
				<paper-icon-item id="{{item.title}}" class$="[[_computeBgClass(item.mode)]]" style="background-color: {{item.color}}" data-index$="[[index]]" data-selector$="#collapse-[[index]]" on-click="_toggleInfo">
					<paper-icon-button icon="my-icons:content-copy" item-icon slot="item-icon" on-click="_openToast"></paper-icon-button>
					<span class="name">{{item.title}}</span>
					<p id="message"><span class="hex">{{item.color}}</span></p>
					<div class="code">
						<paper-icon-button icon="my-icons:[[_icon(item.opened)]]"></paper-icon-button>
					</div>
					<paper-ripple></paper-ripple>
				</paper-icon-item>
				<iron-collapse id$="collapse[[index]]" opened="{{item.opened}}">
					<div class$="[[_computeBgClass(item.mode)]] snip" style="background-color: {{item.color}}">
					background-color: var(--paper-blue-grey-{{item.title}});
					/* {{item.color}} */
					</div>
				</iron-collapse>
			</template>
		</paper-listbox>
	</template>
	<script>
		class MyBluegrey extends Polymer.Element {
			static get is() {
				return 'my-bluegrey';
			}

			_computeBgClass(color) {
				return color + '-bg';
			}

			_toggleInfo(e) {
				var collapseElem = this.shadowRoot.querySelector('#collapse'+e.currentTarget.dataset.index);
				collapseElem.toggle();
			}

			_icon(itemOpen) {
				return itemOpen ? 'expand-less' : 'expand-more';
			}

			_openToast() {
				this.$.copyToast.toggle();
			}

			static get properties() {
				return {};
			}
		}

		window.customElements.define(MyBluegrey.is, MyBluegrey);

	</script>
</dom-module>
