<div id="app">
 <div class="gradient">
  <div class="gradient-2"></div>
  <section class="hero is-medium is-bold">
   <div class="hero-body">
    <h1 class="title">
        Top 200 grossing films
      </h1>
    <div class="search">
     <div id="search">
      <input class="input" name="query" v-model="searchQuery" placeholder="Search films">

     </div>

    </div>
  </section>
  </div>
  <div class="columns content-wrap">
   <div class="column is-offset-one">
    <app-grid :data="gridData" :columns="gridColumns" :labels="gridLabels" :filter-key="searchQuery">
    </app-grid>
   </div>
  </div>
 </div>


 <footer class="footer">
  <div class="container">
   <div class="content has-text-centered">
    <p>
     Data from <a href="http://www.boxofficemojo.com/alltime/adjusted.htm">Box Office Mojo</a> (taken July 2017).
    </p>
   </div>
  </div>
 </footer>

.gradient {
	background: -webkit-linear-gradient(-60deg, #096784 30%, #d83452 80%);
	position: relative;
	opacity: 1;
}
.gradient-2 {
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/47703/empire-strikes-back-min.jpg")
		center
		center
		no-repeat;
	background-size: cover;
	display: block;

	opacity: .3;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.hero {
	background: none;
	margin-bottom: -3.5em;
	z-index: 5;
}
.hero h1 {
	color: #f2f2f2;
}
.hero-body {
	text-align: center;
	z-index: 2;
}
.hero-body .search {
	margin: 0 auto;
	max-width: 400px;
}
.input.is-active,
.input.is-focused,
.input:active,
.input:focus,
.textarea.is-active,
.textarea.is-focused,
.textarea:active,
.textarea:focus {
	border-color: #096784;
}
.content-wrap {
	z-index: 10000;
	position: relative;
}
.table {
	background: none;
}
.table thead td, .table thead th {
	border-width: 0 0 2px;
	color: #f2f2f2;
}
.table thead tr:hover {
	background: none;
}
.table td, .table th {
	padding: .7em .75em;
}
.table tbody tr td:first-child {
	width: 30%;
}
.table tbody tr:nth-child(odd) {
	background-color: #fafafa;
}
.table tbody tr:hover {
	background: #f2f2f2;
}
.table th, .table td {
	border: none;
}
th.active .arrow {
	opacity: 1;
}
.arrow {
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 0;
	margin-left: 5px;
	opacity: 0.66;
}
.arrow.asc {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid #fff;
}

.arrow.dsc {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #fff;
}
.footer a {
	color: #096784;
}

Vue.component("app-grid", {
	template: `<table class="table">
    <thead>
        <tr class="is-primary">
            <th v-for="(key, index) in columns" @click="sortBy(key)" :class="{ active: sortKey == key }">
                <span>{{labels[index]}}</span>
                <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
          </span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="entry in filteredData">
            <td v-for="key in columns">
                {{ formatValue(entry[key], key) }}
            </td>
        </tr>
    </tbody>
</table>`,
	props: {
		data: Array,
		columns: Array,
		labels: Array,
		filterKey: String
	},
	data: function() {
		var sortOrders = {};
		this.columns.forEach(function(key) {
			sortOrders[key] = 1;
		});
		return {
			sortKey: "",
			sortOrders: sortOrders
		};
	},
	computed: {
		filteredData: function() {
			var sortKey = this.sortKey;
			var filterKey = this.filterKey && this.filterKey.toLowerCase();
			var order = this.sortOrders[sortKey] || 1;
			var data = this.data;
			if (filterKey) {
				data = data.filter(function(row) {
					return Object.keys(row).some(function(key) {
						return String(row[key]).toLowerCase().indexOf(filterKey) > -1;
					});
				});
			}
			if (sortKey) {
				data = data.slice().sort(function(a, b) {
					a = a[sortKey];
					b = b[sortKey];
					return (a === b ? 0 : a > b ? 1 : -1) * order;
				});
			}
			return data;
		}
	},
	methods: {
		sortBy: function(key) {
			this.sortKey = key;
			this.sortOrders[key] = this.sortOrders[key] * -1;
		},
		formatValue(value, key) {
			if (key == "grossUnadjusted" || key == "grossAdjusted") {
				console.log(key);
				if (value != null) {
					return "$" + value.toLocaleString("en-US", { style: "decimal" });
				}
			} else {
				return value;
			}
		}
	}
});

var app = new Vue({
	el: "#app",
	data: {
		searchQuery: "",
		gridColumns: ["film", "studio", "grossUnadjusted", "grossAdjusted", "year"],
		gridLabels: ["Film", "Studio", "Gross", "Adjusted", "Year"],
		gridData: []
	},
	methods: {
		fetchFilmData: function() {
			var xhr = new XMLHttpRequest();
			var self = this;
			xhr.open(
				"GET",
				"https://s3-us-west-2.amazonaws.com/s.cdpn.io/47703/moviesByGross.json"
			);
			xhr.onload = function() {
				self.gridData = JSON.parse(xhr.responseText);
			};
			xhr.send();
		}
	}
});
app.fetchFilmData();