<template>
	<div>
		<div class="flex items-center justify-between mb-4">
			<div class="text-lg font-semibold">
				{{ __('Upcoming Evaluations') }}
			</div>
			<Button @click="openEvalModal">
				{{ __('Schedule Evaluation') }}
			</Button>
		</div>
		<div v-if="upcoming_evals.data?.length">
			<div class="grid grid-cols-2 gap-4">
				<div v-for="evl in upcoming_evals.data">
					<div class="border rounded-md p-3">
						<div class="font-semibold mb-3">
							{{ evl.course_title }}
						</div>
						<div class="flex items-center mb-2">
							<Calendar class="w-4 h-4 stroke-1.5" />
							<span class="ml-2">
								{{ dayjs(evl.date).format('DD MMMM YYYY') }}
							</span>
						</div>
						<div class="flex items-center mb-2">
							<Clock class="w-4 h-4 stroke-1.5" />
							<span class="ml-2">
								{{ formatTime(evl.start_time) }}
							</span>
						</div>
						<div class="flex items-center">
							<UserCog2 class="w-4 h-4 stroke-1.5" />
							<span class="ml-2 font-medium">
								{{ evl.evaluator_name }}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-else class="text-sm italic text-ink-gray-5">
			{{ __('No upcoming evaluations.') }}
		</div>
	</div>
	<EvaluationModal
		:batch="batch"
		:endDate="endDate"
		:courses="courses"
		v-model="showEvalModal"
		v-model:reloadEvals="upcoming_evals"
	/>
</template>
<script setup>
import { Calendar, Clock, UserCog2 } from 'lucide-vue-next'
import { inject, ref } from 'vue'
import { formatTime } from '../utils'
import { Button, createResource } from 'frappe-ui'
import EvaluationModal from '@/components/Modals/EvaluationModal.vue'

const dayjs = inject('$dayjs')
const user = inject('$user')
const showEvalModal = ref(false)

const props = defineProps({
	batch: {
		type: String,
		default: null,
	},
	courses: {
		type: Array,
		default: [],
	},
	endDate: {
		type: String,
		default: null,
	},
})

const upcoming_evals = createResource({
	url: 'lms.lms.utils.get_upcoming_evals',
	cache: ['upcoming_evals', user.data.name],
	params: {
		student: user.data.name,
		courses: props.courses.map((course) => course.course),
	},
	auto: true,
})

function openEvalModal() {
	showEvalModal.value = true
}
</script>
