<template>
	<div class="h-screen text-base">
		<div class="grid grid-cols-[70%,30%] h-full">
			<div>
				<header
					class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-3 py-2.5 sm:px-5"
				>
					<Breadcrumbs class="h-7" :items="breadcrumbs" />
					<div class="flex items-center">
						<router-link
							v-if="courseResource.doc"
							:to="{
								name: 'CourseDetail',
								params: { courseName: courseResource.doc.name },
							}"
						>
							<Button>
								<span>
									{{ __('View Course') }}
								</span>
							</Button>
						</router-link>
						<Button variant="solid" @click="submitCourse()" class="ml-2">
							<span>
								{{ __('Save') }}
							</span>
						</Button>
					</div>
				</header>
				<div class="mt-5 mb-10">
					<div class="container mb-5">
						<div class="text-lg font-semibold mb-4">
							{{ __('Course Details') }}
						</div>
						<FormControl
							v-model="course.title"
							:label="__('Title')"
							class="mb-4"
						/>
						<FormControl
							v-model="course.short_introduction"
							:label="__('Short Introduction')"
							class="mb-4"
						/>
						<div class="mb-4">
							<div class="mb-1.5 text-sm text-gray-700">
								{{ __('Course Description') }}
							</div>
							<TextEditor
								:content="course.description"
								@change="(val) => (course.description = val)"
								:editable="true"
								:fixedMenu="true"
								editorClass="prose-sm max-w-none border-b border-x bg-gray-100 rounded-b-md py-1 px-2 min-h-[7rem]"
							/>
						</div>
						<FileUploader
							v-if="!image"
							:fileTypes="['image/*']"
							:validateFile="validateFile"
							@success="
								(file) => {
									image = file
								}
							"
						>
							<template
								v-slot="{ file, progress, uploading, openFileSelector }"
							>
								<div class="mb-4">
									<Button @click="openFileSelector" :loading="uploading">
										{{
											uploading ? `Uploading ${progress}%` : 'Upload an image'
										}}
									</Button>
								</div>
							</template>
						</FileUploader>
						<div v-else class="mb-4">
							<div class="text-xs text-gray-600 mb-1">
								{{ __('Course Image') }}
							</div>
							<div class="flex items-center">
								<div class="border rounded-md p-2 mr-2">
									<FileText class="h-5 w-5 stroke-1.5 text-gray-700" />
								</div>
								<div class="flex flex-col">
									<span>
										{{ image.file_name }}
									</span>
									<span class="text-sm text-gray-500 mt-1">
										{{ getFileSize(image.file_size) }}
									</span>
								</div>
								<X
									@click="removeImage()"
									class="bg-gray-200 rounded-md cursor-pointer stroke-1.5 w-5 h-5 p-1 ml-4"
								/>
							</div>
						</div>
						<FormControl
							v-model="course.video_link"
							:label="__('Preview Video')"
							class="mb-4"
						/>
						<div>
							<div class="mb-1.5 text-sm text-gray-700">
								{{ __('Tags') }}
							</div>
							<div class="flex items-center">
								<div
									v-for="tag in getTags"
									class="flex items-center bg-gray-100 p-2 rounded-md mr-2"
								>
									{{ tag }}
									<X
										class="stroke-1.5 w-3 h-3 ml-2 cursor-pointer"
										@click="removeTag(tag)"
									/>
								</div>
								<FormControl v-model="newTag" @keyup.enter="updateTags()" />
							</div>
						</div>
					</div>
					<div class="container border-t">
						<div class="text-lg font-semibold mt-5 mb-4">
							{{ __('Course Settings') }}
						</div>
						<div class="flex items-center justify-between mb-5">
							<FormControl
								type="checkbox"
								v-model="course.published"
								:label="__('Published')"
							/>
							<FormControl
								type="checkbox"
								v-model="course.upcoming"
								:label="__('Upcoming')"
							/>
							<FormControl
								type="checkbox"
								v-model="course.disable_self_learning"
								:label="__('Disable Self Enrollment')"
							/>
						</div>
					</div>
					<div class="container border-t">
						<div class="text-lg font-semibold mt-5 mb-4">
							{{ __('Course Pricing') }}
						</div>
						<div class="mb-4">
							<FormControl
								type="checkbox"
								v-model="course.paid_course"
								:label="__('Paid Course')"
							/>
						</div>
						<FormControl
							v-model="course.course_price"
							:label="__('Course Price')"
							class="mb-4"
						/>
						<Link
							doctype="Currency"
							v-model="course.currency"
							:filters="{ enabled: 1 }"
							:label="__('Currency')"
						/>
					</div>
				</div>
			</div>
			<div class="border-l px-5 pt-5">
				<!-- <CreateOutline v-if="courseResource.doc" :course="courseResource.doc"/> -->
				<CourseOutline
					v-if="courseResource.doc"
					:courseName="courseResource.doc.name"
					:title="courseResource.doc.title"
					:allowEdit="true"
				/>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	Breadcrumbs,
	TextEditor,
	Button,
	createResource,
	createDocumentResource,
	FormControl,
	FileUploader,
} from 'frappe-ui'
import { inject, onMounted, computed, ref, reactive } from 'vue'
import { convertToTitleCase, createToast, getFileSize } from '../utils'
import Link from '@/components/Controls/Link.vue'
import { FileText, X } from 'lucide-vue-next'
import CourseOutline from '@/components/CourseOutline.vue'

const user = inject('$user')
const tags = ref('')
const newTag = ref('')
const image = ref(null)

const props = defineProps({
	courseName: {
		type: String,
	},
})

const breadcrumbs = computed(() => {
	let crumbs = [
		{
			label: 'Courses',
			route: { name: 'Courses' },
		},
	]
	if (courseResource.doc) {
		crumbs.push({
			label: courseResource.doc?.title,
			route: { name: 'CourseDetail', params: { courseName: props.courseName } },
		})
	}
	crumbs.push({
		label: props.courseName == 'new' ? 'New Course' : 'Edit Course',
		route: { name: 'CreateCourse', params: { courseName: props.courseName } },
	})
	return crumbs
})

const courseResource = createDocumentResource({
	doctype: 'LMS Course',
	name: props.courseName,
	auto: false,
	onSuccess(data) {
		tags.value = data.tags
		imageResource.reload({ image: data.image })
		Object.assign(course, data)
		course.published = data.published ? true : false
		course.upcoming = data.upcoming ? true : false
		course.disable_self_learning = data.disable_self_learning ? true : false
		course.paid_course = data.paid_course ? true : false
	},
})

const imageResource = createResource({
	url: 'lms.lms.api.get_file_info',
	makeParams(values) {
		return {
			file_url: values.image,
		}
	},
	auto: false,
	onSuccess(data) {
		image.value = data
	},
})

onMounted(() => {
	if (!user.data?.is_moderator || !user.data?.is_instructor) {
		window.location.href = '/login'
	}
	if (props.courseName !== 'new') {
		courseResource.reload()
	}
})

/* const course = computed(() => {
	return {
		title: courseResource.doc?.title || '',
		short_introduction: courseResource.doc?.short_introduction || '',
		description: courseResource.doc?.description || '',
		video_link: courseResource.doc?.video_link || '',
		course_image: courseResource.doc?.image || null,
		tags: courseResource.doc?.tags || '',
		published: courseResource.doc?.published ? true : false,
		upcoming: courseResource.doc?.upcoming ? true : false,
		disable_self_learning: courseResource.doc?.disable_self_learning
			? true
			: false,
		course_image: image.value,
		paid_course: courseResource.doc?.paid_course ? true : false,
		course_price: courseResource.doc?.course_price || '',
		currency: courseResource.doc?.currency || '',
		image: courseResource.doc?.image || null,
	}
}) */

const course = reactive({
	title: '',
	short_introduction: '',
	description: '',
	video_link: '',
	course_image: null,
	tags: '',
	published: false,
	upcoming: false,
	disable_self_learning: false,
	paid_course: false,
	course_price: '',
	currency: '',
})

const getTags = computed(() => {
	return courseResource.doc?.tags
		? courseResource.doc.tags.split(', ')
		: tags.value?.split(', ')
})

const courseCreationResource = createResource({
	url: 'frappe.client.insert',
	makeParams(values) {
		return {
			doc: {
				doctype: 'LMS Course',
				image: image.value.file_url,
				...values,
			},
		}
	},
})

const submitCourse = () => {
	if (courseResource.doc) {
		courseResource.setValue.submit(
			{
				image: image.value?.file_url || null,
				...course.value,
			},
			{
				validate() {
					return validateMandatoryFields()
				},
				onSuccess() {
					showToast('Success', 'Course updated successfully', 'check')
				},
				onError(err) {
					showToast('Error', err.messages?.[0] || err, 'x')
				},
			}
		)
	} else {
		courseCreationResource.submit(course.value, {
			validate() {
				return validateMandatoryFields()
			},
			onSuccess() {
				showToast('Success', 'Course created successfully', 'check')
			},
			onError(err) {
				showToast(err)
			},
		})
	}
}

const validateMandatoryFields = () => {
	const mandatory_fields = [
		'title',
		'short_introduction',
		'description',
		'video_link',
		'course_image',
	]
	for (const field of mandatory_fields) {
		if (!course.value[field]) {
			let fieldLabel = convertToTitleCase(field.split('_').join(' '))
			return `${fieldLabel} is mandatory`
		}
	}
	if (
		course.value.paid_course &&
		(!course.value.course_price || !course.value.currency)
	) {
		return 'Course price and currency are mandatory for paid courses'
	}
}

const validateFile = (file) => {
	let extension = file.name.split('.').pop().toLowerCase()
	if (!['jpg', 'jpeg', 'png'].includes(extension)) {
		return 'Only image file is allowed.'
	}
}

const updateTags = () => {
	if (newTag.value) {
		tags.value = tags.value ? `${tags.value}, ${newTag.value}` : newTag.value
		newTag.value = ''
	}
}

const removeTag = (tag) => {
	tags.value = tags.value
		?.split(', ')
		.filter((t) => t !== tag)
		.join(', ')
	newTag.value = ''
}

const showToast = (title, text, icon) => {
	createToast({
		title: title,
		text: text,
		icon: icon,
		iconClasses:
			icon == 'check'
				? 'bg-green-600 text-white rounded-md p-px'
				: 'bg-red-600 text-white rounded-md p-px',
		position: icon == 'check' ? 'bottom-right' : 'top-center',
		timeout: icon == 'check' ? 5 : 10,
	})
}

const removeImage = () => {
	image.value = null
	course.value.course_image = null
}
</script>
