<template>
	<div class="code-sync-indicator">
		<div class="indicator" :class="{enabled: enabled}" @click="onClick"></div>
	</div>
</template>

<script>
	import events from "../../../global-events";
	import {codeSyncServeConnected} from "../../../code-sync-serve";

	export default {
		name: "CodeSyncIndicator",
		data() {
			return {
				enabled: codeSyncServeConnected,
			}
		},
		mounted() {
			events.$on('code-sync-start', this.onCodeSyncStart);
			events.$on('code-sync-stop', this.onCodeSyncStop);
		},
		destroyed() {
			events.$off('code-sync-start', this.onCodeSyncStart);
			events.$off('code-sync-stop', this.onCodeSyncStop);
		},
		methods: {
			onCodeSyncStart() {
				this.enabled = true;
			},
			onCodeSyncStop() {
				this.enabled = false;
			},
			onClick() {
				events.$emit('show-code-sync-serve-dialog');
			}
		}
	}
</script>

<style scoped>

</style>