<link rel="import" href="../bower_components/polymer/polymer-element.html">

<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">

<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../bower_components/iron-image/iron-image.html">

<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/paper-progress/paper-progress.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner-lite.html">

<link rel="import" href="../bower_components/neon-animation/web-animations.html">
<link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="../bower_components/neon-animation/neon-animations.html">

<link rel="import" href="my-icons.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="app-styles.html">

<link rel="lazy-import" href="my-home.html">
<link rel="lazy-import" href="my-colors.html">
<link rel="lazy-import" href="my-icon.html">
<link rel="lazy-import" href="my-elevation.html">
<link rel="lazy-import" href="my-typography.html">
<link rel="lazy-import" href="my-buttons.html">
<link rel="lazy-import" href="my-fab.html">
<link rel="lazy-import" href="my-iconbutton.html">
<link rel="lazy-import" href="my-inputs.html">
<link rel="lazy-import" href="my-items.html">
<link rel="lazy-import" href="my-menu.html">
<link rel="lazy-import" href="my-progress.html">
<link rel="lazy-import" href="my-slider.html">
<link rel="lazy-import" href="my-tabs.html">
<link rel="lazy-import" href="my-spinner.html">
<link rel="lazy-import" href="my-about.html">
<link rel="lazy-import" href="my-404.html">

<link rel="lazy-import" href="my-red.html">
<link rel="lazy-import" href="my-pink.html">
<link rel="lazy-import" href="my-purple.html">
<link rel="lazy-import" href="my-deeppurple.html">
<link rel="lazy-import" href="my-indigo.html">
<link rel="lazy-import" href="my-blue.html">
<link rel="lazy-import" href="my-lightblue.html">
<link rel="lazy-import" href="my-cyan.html">
<link rel="lazy-import" href="my-teal.html">
<link rel="lazy-import" href="my-green.html">
<link rel="lazy-import" href="my-lightgreen.html">
<link rel="lazy-import" href="my-lime.html">
<link rel="lazy-import" href="my-yellow.html">
<link rel="lazy-import" href="my-amber.html">
<link rel="lazy-import" href="my-orange.html">
<link rel="lazy-import" href="my-deeporange.html">
<link rel="lazy-import" href="my-brown.html">
<link rel="lazy-import" href="my-grey.html">
<link rel="lazy-import" href="my-bluegrey.html">
<link rel="lazy-import" href="my-black.html">
<link rel="lazy-import" href="my-white.html">

<link rel="lazy-import" href="my-avicons.html">
<link rel="lazy-import" href="my-communicationicons.html">
<link rel="lazy-import" href="my-deviceicons.html">
<link rel="lazy-import" href="my-editoricons.html">
<link rel="lazy-import" href="my-hardwareicons.html">
<link rel="lazy-import" href="my-imageicons.html">
<link rel="lazy-import" href="my-mapsicons.html">
<link rel="lazy-import" href="my-notificationicons.html">
<link rel="lazy-import" href="my-socialicons.html">
<link rel="lazy-import" href="my-placesicons.html">

<dom-module id="my-app">
	<template>
    <style is="custom-style" include="shared-styles">
      :host {
        display: block;

				--primary-color: var(--paper-grey-800);
				--light-primary-color: var(--paper-grey-500);
				--dark-primary-color: var(--paper-grey-700);

				--accent-color: var(--paper-grey-700);
				--light-accent-color: var(--paper-grey-500);
				--dark-accent-color: var(--paper-grey-800);

				--primary-text-color: rgba(0,0,0,.87);
				--secondary-text-color: rgba(0,0,0,.38);
				--light-text-color: rgba(0,0,0,.12);

				--paper-tabs-selection-bar-color: rgba(0,0,0,.87);
				--paper-tab-ink: var(--light-text-color);

				--paper-progress-active-color: var(--dark-accent-color);
				--paper-progress-secondary-color: var(--light-accent-color);

				--paper-spinner-color: var(--light-accent-color);

				color: var(--primary-text-color);
      }
      app-header {
				background-color: #fff;
				color: var(--secondary-text-color);
				--app-header-shadow: {
					box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.2);
				};
      }
			.sticky-nav, .tab-nav {
				padding: 0;
			}
			#colors-nav, #icons-nav, #page-nav {
				display: none;
			}
			[main-title] {
				margin-left: 32px;
				text-transform: capitalize;
				text-overflow: ellipsis;
				font-family: 'Product Sans', 'Roboto', 'Noto', sans-serif;
				font-weight: 600;
				color: var(--dark-accent-color);
			}
			.iron-selected {
        color: var(--dark-accent-color);
			}
      .pages {
        @apply --layout-flex;
      }
			neon-animated-pages > .iron-selected {
        @apply --layout-flex;
				position: relative;
			}
			#sharehome {
				@apply --layout-horizontal;
				@apply --layout-center;
				@apply --layout-justified;
				@apply --shadow-elevation-12dp;
				max-width: 320px;
				background-color: #fff !important;
				color: var(--paper-grey-500);
			}
			.toast-button {
				margin: 8px;
			}
      paper-tabs {
        height: 100%;
      }
			footer {
				@apply --layout-horizontal;
				@apply --layout-center;
    		@apply --layout-justified;
				background-color: var(--paper-grey-200);
				color: var(--secondary-text-color);
				font-size: 16px;
				padding: 32px;
			}
			@media (max-width: 640px) {
				paper-toast {
					margin: 0;
					max-width: none;
					width: 100%;
				}
				#sharehome {
					max-width: none;
				}
			}
    </style>
		<style is="custom-style" include="app-styles"></style>
    <app-location
        route="{{route}}"
        url-space-regex="^[[rootPath]]">
    </app-location>
    <app-route
        route="{{route}}"
        pattern="[[rootPath]]:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>
		<iron-media-query query="min-width: 641px" query-matches="{{wideLayout}}"></iron-media-query>
		<paper-toast id="updateToast" text="App cached. Browse offline!"></paper-toast>
		<paper-toast id="sharehome" duration="0">
			<div class="flex-vertical">
				<div class="flex-horizontal">
					<div class="flexchild">Share via</div><paper-icon-button icon="my-icons:close" on-tap="openShare"></paper-icon-button>
				</div>
				<div>
					<template is="dom-repeat" items="[[social]]">
						<a href="{{item.link}}" target="_blank"><paper-icon-button class="toast-button" src="../images/assets/social/{{item.icon}}.svg"></paper-icon-button></a>
					</template>
					<a href="mailto:liyascthomas@gmail.com?&subject=Hello%20Liyas!&body=Hi," target="_blank">
						<paper-icon-button class="toast-button" icon="my-icons:mail"></paper-icon-button>
					</a>
					<a href="tel:+919539653962">
						<paper-icon-button class="toast-button" icon="my-icons:phone"></paper-icon-button>
					</a>
				</div>
			</div>
		</paper-toast>
		<paper-toast id="ready_toast" duration="5000">
			<span>Click on <paper-icon-button icon="my-icons:content-copy"></paper-icon-button> to copy code to clipboard!</span>
		</paper-toast>
		<!-- Main content -->
		<app-header-layout fullbleed>
			<app-header id="animatable" slot="header" fixed condenses reveals effects="waterfall" class$="[[_computeBgClass(page)]]">
				<app-toolbar class="tab-nav">
					<paper-tabs id="main-nav" selected="[[page]]" attr-for-selected="id" on-click="scrollTop" no-bar autoselect scrollable fit-container hide-scroll-buttons$={{!wideLayout}}>
						<paper-tab id="home">
							<a href="home" tabindex="-1">
								<iron-icon src="../images/assets/feeds/Google_Material_Design_Logo.svg"></iron-icon>
							</a>
						</paper-tab>
						<iron-ajax auto url="data/home_feeds.json" id="ajax0" loading="{{loading0}}" handle-as="json" last-error="{{error0}}" last-response="{{ajaxResponse0}}">
						</iron-ajax>
						<template is="dom-if" if="{{loading0}}">
							<div class="actions" hidden$="[[!loading0]]">
								<paper-spinner-lite active$="[[loading0]]"></paper-spinner-lite>
							</div>
						</template>
						<template is="dom-if" if="{{error0}}">
							<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>
						<template is="dom-repeat" items="[[ajaxResponse0]]">
							<paper-tab id="{{item.link}}">
								<a href="{{item.link}}" tabindex="-1">
									<iron-icon icon="my-icons:{{item.icon}}"></iron-icon>
								</a>
							</paper-tab>
						</template>
					</paper-tabs>
					<template is="dom-if" if="{{loading0}}">
						<paper-progress indeterminate active$="[[loading0]]" top-item></paper-progress>
					</template>
				</app-toolbar>
				<app-toolbar class="sticky-nav" sticky>
					<paper-tabs id="colors-nav" selected="[[page]]" attr-for-selected="id" autoselect scrollable fit-container hide-scroll-buttons$={{!wideLayout}}>
						<paper-tab id="colors">
							<a href="colors" tabindex="-1">
								<iron-icon icon="my-icons:home"></iron-icon>
							</a>
						</paper-tab>
						<iron-ajax auto url="data/color_feeds.json" id="ajax1" loading="{{loading1}}" handle-as="json" last-error="{{error1}}" last-response="{{ajaxResponse1}}">
						</iron-ajax>
						<template is="dom-if" if="{{loading1}}">
							<div class="actions" hidden$="[[!loading1]]">
								<paper-spinner-lite active$="[[loading1]]"></paper-spinner-lite>
							</div>
						</template>
						<template is="dom-if" if="{{error1}}">
							<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>
						<template is="dom-repeat" items="[[ajaxResponse1]]">
							<paper-tab id="{{item.link}}">
								<a href="{{item.link}}" tabindex="-1">
									{{item.title}}
								</a>
							</paper-tab>
						</template>
					</paper-tabs>
					<paper-tabs id="icons-nav" selected="[[page]]" attr-for-selected="id" autoselect scrollable fit-container hide-scroll-buttons$={{!wideLayout}}>
						<paper-tab id="icon">
							<a href="icon" tabindex="-1">
								<iron-icon icon="my-icons:home"></iron-icon>
							</a>
						</paper-tab>
						<iron-ajax auto url="data/icon_feeds.json" id="ajax2" loading="{{loading2}}" handle-as="json" last-error="{{error2}}" last-response="{{ajaxResponse2}}">
						</iron-ajax>
						<template is="dom-if" if="{{loading2}}">
							<div class="actions" hidden$="[[!loading2]]">
								<paper-spinner-lite active$="[[loading2]]"></paper-spinner-lite>
							</div>
						</template>
						<template is="dom-if" if="{{error2}}">
							<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>
						<template is="dom-repeat" items="[[ajaxResponse2]]">
							<paper-tab id="{{item.link}}">
								<a href="{{item.link}}" tabindex="-1">
									{{item.title}}
								</a>
							</paper-tab>
						</template>
					</paper-tabs>
					<div id="page-nav" main-title>{{page}}</div>
				</app-toolbar>
			</app-header>
			<div class="pages">
				<neon-animated-pages selected="[[page]]" attr-for-selected="name" fallback-selection="404" role="main" entry-animation="fade-in-animation" exit-animation="fade-out-animation">
					<my-home name="home"></my-home>
					<my-colors name="colors"></my-colors>
					<my-icon name="icon"></my-icon>
					<my-elevation name="elevation"></my-elevation>
					<my-typography name="typography"></my-typography>
					<my-buttons name="buttons"></my-buttons>
					<my-fab name="fab"></my-fab>
					<my-iconbutton name="iconbutton"></my-iconbutton>
					<my-inputs name="inputs"></my-inputs>
					<my-items name="items"></my-items>
					<my-menu name="menu"></my-menu>
					<my-progress name="progress"></my-progress>
					<my-slider name="slider"></my-slider>
					<my-spinner name="spinner"></my-spinner>
					<my-tabs name="tabs"></my-tabs>
					<my-about name="about"></my-about>
					<my-404 name="404"></my-404>
					<my-red name="red"></my-red>
					<my-pink name="pink"></my-pink>
					<my-purple name="purple"></my-purple>
					<my-deeppurple name="deeppurple"></my-deeppurple>
					<my-indigo name="indigo"></my-indigo>
					<my-blue name="blue"></my-blue>
					<my-lightblue name="lightblue"></my-lightblue>
					<my-cyan name="cyan"></my-cyan>
					<my-teal name="teal"></my-teal>
					<my-green name="green"></my-green>
					<my-lightgreen name="lightgreen"></my-lightgreen>
					<my-lime name="lime"></my-lime>
					<my-yellow name="yellow"></my-yellow>
					<my-amber name="amber"></my-amber>
					<my-orange name="orange"></my-orange>
					<my-deeporange name="deeporange"></my-deeporange>
					<my-brown name="brown"></my-brown>
					<my-grey name="grey"></my-grey>
					<my-bluegrey name="bluegrey"></my-bluegrey>
					<my-black name="black"></my-black>
					<my-white name="white"></my-white>
					<my-avicons name="avicons"></my-avicons>
					<my-communicationicons name="communicationicons"></my-communicationicons>
					<my-deviceicons name="deviceicons"></my-deviceicons>
					<my-editoricons name="editoricons"></my-editoricons>
					<my-hardwareicons name="hardwareicons"></my-hardwareicons>
					<my-imageicons name="imageicons"></my-imageicons>
					<my-mapsicons name="mapsicons"></my-mapsicons>
					<my-notificationicons name="notificationicons"></my-notificationicons>
					<my-socialicons name="socialicons"></my-socialicons>
					<my-placesicons name="placesicons"></my-placesicons>
				</neon-animated-pages>
			</div>
			<footer>
				<div>
					<iron-icon icon="my-icons:copyright"></iron-icon> Liyas Thomas
				</div>
				<div>
					<a href="about">
						<paper-icon-button icon="my-icons:info-outline"></paper-icon-button>
					</a>
					<paper-icon-button icon="my-icons:share" on-tap="openShare"></paper-icon-button>
				</div>
			</footer>
		</app-header-layout>
	</template>
	<script>
		// Gesture events like tap and track generated from touch will not be
		// preventable, allowing for better scrolling performance.
		Polymer.setPassiveTouchGestures(true);

		class MyApp extends Polymer.Element {
			static get is() {
				return 'my-app';
			}

			static get properties() {
				return {
					page: {
						type: String,
						reflectToAttribute: true,
						observer: '_pageChanged'
					},
//					wideLayout: {
//						type: Boolean,
//						value: false,
//						reflectToAttribute: true,
//						observer: 'onLayoutChange'
//					},
//					opened: {
//						type: Boolean,
//						reflectToAttribute: true
//					},
					social: {
						type: Array,
						value: function() {
							return [
								{
									link: "https://www.facebook.com/liyasthomas",
									icon: "facebook"
								},
								{
									link: "https://twitter.com/liyasthomas",
									icon: "twitter"
								},
								{
									link: "https://plus.google.com/liyasthomas",
									icon: "google-plus"
								},
								{
									link: "https://github.com/liyasthomas",
									icon: "github"
								},
								{
									link: "https://www.linkedin.com/in/liyasthomas",
									icon: "linkedin"
								},
								{
									link: "https://www.linkedin.com/in/liyasthomas",
									icon: "behance"
								},
								{
									link: "https://www.linkedin.com/in/liyasthomas",
									icon: "dribbble"
								},
								{
									link: "https://api.whatsapp.com/send?phone=919539653962&text=Hi%20Liyas,",
									icon: "whatsapp"
								}
							]
						}
					},
					routeData: Object,
					subroute: String,
					// This shouldn't be neccessary, but the Analyzer isn't picking up
					// Polymer.Element#rootPath
					rootPath: String,
				};
			}

			static get observers() {
				return [
					'_routePageChanged(routeData.page)',
				];
			}

			show() {
				const animation = this.$.animatable.animate([
					{transform:'translateY(-100%)', easing: 'ease'},
					{transform:'translateY(0)', easing: 'ease'},
				],
				{
					duration: 800,
				});

				animation.finished.then(() => {
					this.$.animatable.style.transform = 'translateY(0)';
				});
			}

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

			scrollTop() {
				var scrollDuration = 200;
				var scrollStep = -window.scrollY / (scrollDuration / 15),
					scrollInterval = setInterval(function() {
						if (window.scrollY != 0) {
							window.scrollBy(0, scrollStep);
						} else clearInterval(scrollInterval);
					}, 15);
			}

			update(worker) {
				this.$.updateToast.show();
			}

			openShare() {
				this.$.sharehome.toggle();
			}

			constructor() {
				super();
			}

			ready() {
				super.ready();
			}

			connectedCallback() {
				super.connectedCallback();
				Polymer.RenderStatus.beforeNextRender(this, function() {
					this.$.ready_toast.open();
				});
			}

			_routePageChanged(page) {
				// If no page was found in the route data, page will be an empty string.
				// Default to 'home' in that case.
				this.page = page || 'home';

				// Close a non-persistent drawer when the page & route are changed.
				//				if (!this.$.drawer.persistent) {
				//					this.$.drawer.close();
				//				}
			}

			_pageChanged(page) {
				// Load page import on demand. Show 404 page if fails
				var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
				Polymer.importHref(
					resolvedPageUrl,
					null,
					this._showPage404.bind(this),
					true);
			}

			//			onLayoutChange(wide) {
			//				var drawer = this.$.drawer;
			//
			//				if (wide && drawer.opened) {
			//					drawer.opened = false;
			//				}
			//			}

			_showPage404() {
				this.page = '404';
			}
		}

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

	</script>
</dom-module>
