<template>
    <div id="app">
	<header>
	    <h1>
		Timer
	    </h1>
	    <div>
		<button @click="mark">Go</button>
		<button @click="reset">Reset</button>
	    </div>
	</header>
	<ol>
	    <li class=header>
		<div>Time</div><div>Lap Time</div><div>Cumulative</div>
	    </li>

	    <li v-for="[time,diff,cum,new_annotation] in times">
		<div class="time">{{formatTime(time.time)}}</div>
		<div class="diff"><div class="time">{{formatDiff(diff)[0]}}</div><div class="mills">.{{formatDiff(diff)[1]}}</div></div>
		<div class="cum"><div class="time">{{formatDiff(cum)[0]}}</div><div class="mills">.{{formatDiff(cum)[1]}}</div></div>
		<div class="actions">
		    <form @submit.prevent="annotate(time.id, new_annotation)">
		    <input type=text v-model="new_annotation">
		    <button type="submit">+</button>
		    </form>
		</div>
		<ul v-show="time.annotations.length > 0">
		    <li class="annotation" v-for="annotation in time.annotations">
			<div>
			    {{annotation.text}}
			</div>
			<time datetime="annotation.time">{{formatTime(annotation.time)}}</time>
		    </li>
		</ul>
		
	    </li>
	</ol>
    </div>
  </template>

<script>

import {mapGetters} from 'vuex';

export default {
    name: 'app',
    data () {
	return {
	    msg: 'Welcome to Your Vue.js App',
	    curTime: Date.now(),
	}
    },

    beforeMount() {
	// this.$data.curTime = new Date();
	// console.log('foo');
	// window.setInterval( () => {
	//     console.log(this.$data);
	//     this.$data.curTime = new Date();
	// }, 100);
    },

    computed: {
	times() {
	    let result = [];
	    for (let cur of this.$store.state.times) {
		if ((typeof cur.time) === "string") {
		    cur = Object.assign(
			Object.create(cur),
			{time: new Date(cur.time)}
		    );
		}
		
		let diff = 0, cum = 0;
		if (cur.id > 0) {
		    cum = cur.time - result[cur.id-1][0].time;
		    diff = cur.time-result[0][0].time
		}

		result.unshift([cur, diff, cum, '']);
	    }
	    return result;
	},
    },

    methods: {
	reset() {
	    this.$store.commit('reset');
	},
	
	annotate(idx, annotation) {
	    this.$store.commit('annotate', {idx, annotation});
	},
	mark() {
	    this.$store.commit('add');
	},

	formatTime: function (time) {
	    return (new Intl.DateTimeFormat('en-US', {
		year:'numeric', month:'numeric', day:'numeric', hour:'2-digit', minute: '2-digit', second:'2-digit'
	    })).format(time.time);
	},

	formatDiff(diff) {
	    let secs = Math.floor(diff/1000),
		mills = diff % 1000,
		mins = Math.floor(secs/60);
	    secs = secs % 60;
	    mins = `${mins}`;
	    if (mills.length < 3) {
		let pad = '0'*(3-mills.length);
		mills = pad + mills;
	    }
	    let result = `${secs}`
	    if (mins > 0) {
		result = `${mins}:${result.padStart(2,'0')}`;
	    }
	    return [result,mills];
	}
    },
}
    </script>

<style lang="scss">
  * { box-sizing: border-box; }
    #app {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: right;
	color: #2c3e50;
    }

    header {
	display: grid;
	grid-template-columns: 75fr 25fr;
	height: 3em;
	line-height: 3em;
	padding: 0;
    }
    
    h1, h2 {
	text-align: center;
	font-size: 1.25em;
	padding: 0;
	margin: 0;
    }

    ul {
	list-style-type: none;
	padding: 0;
    }

    a {
	color: #42b983;
    }

    ol {
	position: absolute;
	width: 100%;
	top: 4em;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0 1em;
	padding-top: 3.25em;
	overflow-y: scroll;
	overflow-x: auto;
    }

    ol > li {
	display: grid;
	grid-template-columns: 25fr 12.5fr 12.5fr 25fr 25fr;
	padding: 0.5em;
	margin-bottom: 0.25em;
    }

    li.header {
	position: fixed;
	top: 4em;
	left: 1em;
	right: 1em;
	background: #eee;
    }

    ul {
	/* grid-column-start: 2; */
	/* grid-column-end: span 2; */
	padding: 0.25em;
	margin: 0.25em;
	padding-right: 0;
	margin-right: 0;
    }
    ul > li {
	padding: 0.2em 1em;
	background: #ffb;
	font-style: italic;
    }
    ul > li+li {
	border-top: 0.25em double #eee;
    }

    .diff, .cum {
	text-align: right;
    }
    
    .diff div, .cum div {
	display: inline-block;
    }

    .diff .time, .cum .time {
	max-width: 80%;
	text-align: right;
    }

    .diff .mills, .cum .mills {
	width: 20%;
	text-align: left;
    }

    button {
	height: 100%;
    }

    .annotation {
	color: #888;
	}
    .annotation time::before {
	content: "— "
    }
    .annotation time {
	font-size: 60%;

    }
</style>