const template = html`
	<div class="task-group" v-if="show">
		<div class="headline">
			<h4><i class="fa fa-book"></i></i>On-site Hours Remaining</h4>
		</div>
		<div class="form-group row">
			<label class="col-sm-10 control-label">Monthly on-site</label>
			<div class="col-sm-2">
				{{data.emergency-data.spentEmergency}}
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-10 control-label">Monthly recurring</label>
			<div class="col-sm-2">
				{{data.recurring}}
			</div>
		</div>
		<div class="form-group row">
			<label class="col-sm-10 control-label">Monthly rolling period start day</label>
			<div class="col-sm-2" >
				{{data.start | ordinalSuffix}} day of the month
			</div>
		</div>
	</div>
`
import api from "../../api.js";
export default () => {
	new Vue({
		el: "#hours",
		data() {
			return {
				taskid: window.taskid,
				data: {
					onSite: 0,
					emergency: 0,
					recurring: 0,
					start: 0,
					spentEmergency: 0,
					test: null
				},
				show: false
			}
		},
		async mounted() {
			// Only try to load if we have a valid task ID
			if (this.taskid && this.taskid !== 'undefined') {
				this.load()
			} else {
				console.log('Hours component: No valid task ID, component will remain hidden')
			}
		},
		methods: {
			async load() {
				try {
					const data = await api.get['clients/' + this.taskid]()
					if (data && data.data) {
						this.test = data
						this.data.emergency = data.data.EmergencyRemaining
						this.data.recurring = data.data.RecurringRemaining
						this.data.start = data.data.contractStart
						if (this.data.emergency && this.data.recurring && this.data.start) {
							this.show = true
						}
					}
				} catch (error) {
					console.log('Hours component: Client data not available for task', this.taskid)
					// Don't show the component if client data is not available
					this.show = false
				}
			},
		},
		watch: {
			taskid() {
				this.load()
				debugger
			}
		},
		filters: {
			ordinalSuffix(i) {
				var j = i % 10,
					k = i % 100;
				if (j == 1 && k != 11) {
					return i + "st";
				}
				if (j == 2 && k != 12) {
					return i + "nd";
				}
				if (j == 3 && k != 13) {
					return i + "rd";
				}
				return i + "th";
			}
		},
		template
	})
}
