<template>
	<div>
		<div class="flex justify-between mb-5">
			<div class="space-y-1">
				<div class="text-lg text-ink-gray-9 font-semibold">
					{{ __('Feedback') }}
				</div>
				<div
					v-if="feedbackList.data?.length && isAdmin"
					class="leading-5 text-ink-gray-7 text-sm mb-2 mt-5"
				>
					{{ __('Average Feedback Received') }}
				</div>
			</div>
			<Button
				v-if="feedbackList.data?.length && isAdmin"
				variant="outline"
				@click="showAllFeedback = true"
			>
				{{ __('View all feedback') }}
			</Button>
		</div>
		<div v-if="user.data?.is_student">
			<div>
				<div class="leading-5 mb-4 text-ink-gray-7">
					<div v-if="readOnly">
						{{ __('Thank you for providing your feedback.') }}
						<span
							@click="showFeedbackForm = !showFeedbackForm"
							class="underline cursor-pointer"
							>{{ __('Click here') }}</span
						>
						{{ __('to view your feedback.') }}
					</div>
					<div v-else>
						{{ __('Help us improve by providing your feedback.') }}
					</div>
				</div>
				<div class="space-y-4" :class="showFeedbackForm ? 'block' : 'hidden'">
					<div class="space-y-4">
						<Rating
							v-for="key in ratingKeys"
							v-model="feedback[key]"
							:label="__(convertToTitleCase(key))"
							:readonly="readOnly"
						/>
					</div>
					<FormControl
						v-model="feedback.feedback"
						type="textarea"
						:label="__('Feedback')"
						:rows="9"
						:readonly="readOnly"
					/>
					<Button v-if="!readOnly" @click="submitFeedback">
						{{ __('Submit Feedback') }}
					</Button>
				</div>
			</div>
		</div>

		<div v-else-if="feedbackList.data?.length">
			<div class="space-y-4">
				<Rating
					v-for="key in ratingKeys"
					v-model="average[key]"
					:label="__(convertToTitleCase(key))"
					:readonly="true"
				/>
			</div>
		</div>
		<div v-else class="text-ink-gray-7 leading-5">
			{{ __('No feedback received yet.') }}
		</div>
	</div>
	<FeedbackModal
		v-if="feedbackList.data?.length"
		v-model="showAllFeedback"
		:feedbackList="feedbackList.data"
	/>
</template>
<script setup>
import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
import { convertToTitleCase } from '@/utils'
import { Button, createListResource, FormControl, Rating } from 'frappe-ui'
import FeedbackModal from '@/components/Modals/FeedbackModal.vue'

const user = inject('$user')
const ratingKeys = ['content', 'instructors', 'value']
const readOnly = ref(false)
const average = reactive({})
const feedback = reactive({})
const showFeedbackForm = ref(true)
const showAllFeedback = ref(false)

const props = defineProps({
	batch: {
		type: String,
		required: true,
	},
})

onMounted(() => {
	let filters = {
		batch: props.batch,
	}
	if (user.data?.is_student) {
		filters['member'] = user.data?.name
	}
	feedbackList.update({
		filters: filters,
	})
	feedbackList.reload()
})

const feedbackList = createListResource({
	doctype: 'LMS Batch Feedback',
	filters: {
		batch: props.batch,
	},
	fields: [
		'content',
		'instructors',
		'value',
		'feedback',
		'name',
		'member',
		'member_name',
		'member_image',
	],
	cache: ['feedbackList', props.batch, user.data?.name],
})

watch(
	() => feedbackList.data,
	() => {
		if (feedbackList.data.length) {
			let data = feedbackList.data
			readOnly.value = true
			showFeedbackForm.value = false

			ratingKeys.forEach((key) => {
				average[key] = 0
			})

			data.forEach((row) => {
				Object.keys(row).forEach((key) => {
					if (ratingKeys.includes(key)) row[key] = row[key] * 5
					feedback[key] = row[key]
				})
				ratingKeys.forEach((key) => {
					average[key] += row[key]
				})
			})
			Object.keys(average).forEach((key) => {
				average[key] = average[key] / data.length
			})
		}
	}
)

const submitFeedback = () => {
	ratingKeys.forEach((key) => {
		feedback[key] = feedback[key] / 5
	})
	feedbackList.insert.submit(
		{
			member: user.data?.name,
			batch: props.batch,
			...feedback,
		},
		{
			onSuccess: () => {
				feedbackList.reload()
				showFeedbackForm.value = false
				readOnly.value = true
			},
		}
	)
}

const isAdmin = computed(() => {
	return user.data?.is_moderator || user.data?.is_evaluator
})
</script>
<style>
.feedback-list > button > div {
	align-items: start;
	padding: 0.15rem 0;
}
</style>
