<script lang="ts">
	import axios from 'axios';

	const getAccumulatedSeconds = (newerTime, olderTime) => {
		return Math.floor((newerTime-olderTime)/1000);
	}

	export default {
		data() {
			return {
				categories:[],
				running: false,
				startTime:0,
				savedPreviousSeconds:0
			}
		},
		methods: {
			submit(event){
				event.preventDefault();
				console.log(this.description);
				console.log(this.seconds);
				console.log(this.comments);
				console.log(this.practice_category_id);
			},
			start(event){
				this.startTime = Date.now();
				this.running = true;
			},
			stop(event){
				this.running = false;
				this.savedPreviousSeconds += getAccumulatedSeconds(Date.now(), this.startTime);
			},
			reset(event){
				this.savedPreviousSeconds = 0;
			}
		},
		mounted() {
			axios.get(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'categories').then((response)=>{
				this.categories = response.data
			})
		}
	}
</script>

<template>
	<details>
		<summary><h2>Timer</h2></summary>
		<button :disabled="running" @click="start">Start Timer</button>
		<button :disabled="!running" @click="stop">Stop Timer</button>
		<button :disabled="running || savedPreviousSeconds === 0" @click="reset">Reset</button>
		<form @submit="submit">
			<label>Description</label>
			<input v-model="description" type="text"/>

			<label>Seconds</label>
			<input v-model="savedPreviousSeconds" type="number"/>

			<label>Comments</label>
			<textarea v-model="comments"/>

			<label>Practice Category</label>
			<select v-model="practice_category_id">
				<option v-for="category in categories" v-bind:value="category.id">
					{{category.id}}.
					{{category.instrument}}
					:
					{{category.category}}
				</option>
			</select>

			<input type="Submit"/>
		</form>
	</details>
</template>

<style scoped>
label, [type="submit"] {
	display:block;
}
</style>
