import FormForm from "../../Form/Form.js";
import FormInput from "../../Form/Input.js";
import FhcCalendar from "../../Calendar/LvPlan.js";

import ApiLvPlan from '../.././../api/factory/lvPlan.js';
import ApiStgOrgLvPlan from '../.././../api/factory/stgOrgLvPlan.js';
import ApiAuthinfo from '../../../api/factory/authinfo.js';

export const DEFAULT_MODE_LVPLAN_DESKTOP = "Week";
export const DEFAULT_MODE_LVPLAN_MOBILE = "List";

export default {
	name: "LvPlanStgOrg",
	components: {
		FormForm,
		FormInput,
		FhcCalendar,
	},
	props: {
		propsViewData: Object
	},
	data() {
		return {
			localProps: {},
			studiensemester_kurzbz: null,
			studiensemester_start: null,
			studiensemester_ende: null,
			uid: null,
			isMitarbeiter: false,
			isStudent: false,
			currentStgBezeichnung: null,
			formData: {
				stgkz: null,
				sem: null,
				verband: null,
				gruppe: null,
			},
			listStg: [],
			listSem: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
			listVerband: [],
			listGroup: [],
			rangeIntervalFirst: null,
			timezone: FHC_JS_DATA_STORAGE_OBJECT.timezone,
		};
	},
	inject: ["isMobile"],
	computed: {
		maxSemester() {
			const currentStg = this.listStg.find(
				(item) => item.studiengang_kz === this.formData.stgkz,
			);
			return currentStg?.max_semester;
		},
		currentDay() {
			if (!this.propsViewData?.focus_date || isNaN(new Date(this.propsViewData?.focus_date)))
				return luxon.DateTime.now().setZone(this.timezone).toISODate();
			return this.propsViewData?.focus_date;
		},
		currentMode() {
			let validModes = ["day", "month"];
			validModes.push(this.isMobile ? "list" : "week");

			const defaultMode = this.isMobile
				? DEFAULT_MODE_LVPLAN_MOBILE
				: DEFAULT_MODE_LVPLAN_DESKTOP;

			if (
				!this.propsViewData?.mode ||
				!validModes.includes(this.propsViewData?.mode.toLowerCase())
			)
				return defaultMode;
			return this.propsViewData?.mode;
		},
		downloadLinks() {
			// do not show download links in StgOrg Mode
			return false;

			if (
				!this.studiensemester_start ||
				!this.studiensemester_ende ||
				!this.uid
			)
				return false;

			let type = false;
			type = this.isStudent ? "student" : type;
			type = this.isMitarbeiter ? "lektor" : type;
			if (false === type) {
				return;
			}

			const opts = { zone: this.timezone };
			const start = luxon.DateTime
				.fromISO(this.studiensemester_start, opts)
				.toUnixInteger();
			const ende = luxon.DateTime
				.fromISO(this.studiensemester_ende, opts)
				.toUnixInteger();

			const download_link =
				FHC_JS_DATA_STORAGE_OBJECT.app_root +
				"cis/private/lvplan/stpl_kalender.php" +
				"?type=" +
				type +
				"&pers_uid=" +
				this.uid +
				"&begin=" +
				start +
				"&ende=" +
				ende;

			return [
				{
					title: "excel",
					icon: "fa-solid fa-file-excel",
					link: download_link + "&format=excel",
				},
				{
					title: "csv",
					icon: "fa-solid fa-file-csv",
					link: download_link + "&format=csv",
				},
				{
					title: "ical1",
					icon: "fa-regular fa-calendar",
					link: download_link + "&format=ical&version=1&target=ical",
				},
				{
					title: "ical2",
					icon: "fa-regular fa-calendar",
					link: download_link + "&format=ical&version=2&target=ical",
				},
			];
		},
	},
	watch: {
		async isMobile() {
			await this.$nextTick();
			this.handleChangeMode(
				this.currentMode,
				luxon.DateTime.fromISO(this.currentDay, {
					zone: this.timezone,
				}),
			);
		},
	},
	methods: {
		loadLvPlan() {
			if (!this.formData.stgkz) {
				this.$fhcAlert.alertError(this.$p.t("LvPlan", "chooseStg"));
				return;
			}

			if (
				!this.formData.sem &&
				(this.formData.verband || this.formData.gruppe)
			) {
				this.$fhcAlert.alertError(
					this.$p.t("LvPlan", "error_SemMissing"),
				);
				return;
			}

			if (!this.formData.verband && this.formData.gruppe) {
				this.$fhcAlert.alertError(
					this.$p.t("LvPlan", "error_VerbandMissing"),
				);
				return;
			}

			const params = {
				mode: this.currentMode,
				focus_date: this.currentDay,
				stgkz: this.formData.stgkz,
				sem: this.formData.sem,
				verband: this.formData.verband,
				gruppe: this.formData.gruppe,
			};

			//ensure logic: no value after a null value in route
			if (params.sem == null) {
				params.verband = null;
				params.gruppe = null;
			}
			if (params.verband == null) {
				params.gruppe = null;
			}

			//delete all null values to avoid null in router
			Object.keys(params).forEach(
				(key) => params[key] == null && delete params[key],
			);

			this.$router.push({
				name: "StgOrgLvPlan",
				params,
			});

			this.$refs['calendar']?.resetEventLoader();
		},
		loadListSem(){
			if(!this.listSem)
				this.listSem = [...Array(this.maxSemester).keys()].map(i => i + 1);
		},
		loadListVerband() {
			this.$api
				.call(ApiLvPlan.getLehrverband(this.formData.stgkz, this.formData.sem, this.formData.verband))
				.then(result => {
					const data = result.data;
					const mappedData = data.map((item) => item.verband);
					this.listVerband = [
						...new Set(
							mappedData.filter(
								(v) =>
									v !== null &&
									v !== undefined &&
									String(v).trim() !== "",
							),
						),
					].sort();
				})
				.catch(this.$fhcAlert.handleSystemError);
		},
		loadListGroup() {
			this.$api
				.call(ApiLvPlan.getGruppe(this.formData.stgkz, this.formData.sem, this.formData.verband))
				.then(result => {
					const data = result.data;
					const mappedData = data.map((item) => item.gruppe);
					this.listGroup = [
						...new Set(
							mappedData.filter(
								(v) =>
									v !== null &&
									v !== undefined &&
									String(v).trim() !== "",
							),
						),
					].sort();
				})
				.catch(this.$fhcAlert.handleSystemError);
		},
		handleChangeDate(day, newMode) {
			return this.handleChangeMode(newMode, day);
		},
		handleChangeMode(newMode, day) {
			const mode = newMode[0].toUpperCase() + newMode.slice(1);
			const focus_date = day.toISODate();

			this.$router.push({
				name: "StgOrgLvPlan",
				params: {
					mode,
					focus_date,
					stgkz: this.formData.stgkz,
					sem: this.formData.sem,
					verband: this.formData.verband,
					gruppe: this.formData.gruppe,
				},
			});
		},
		updateRange(rangeInterval) {
			this.$api
				.call(
					ApiLvPlan.studiensemesterDateInterval(
						rangeInterval.end.startOf("week").toISODate(),
					),
				)
				.then((res) => {
					this.studiensemester_kurzbz =
						res.data.studiensemester_kurzbz;
					this.studiensemester_start = res.data.start;
					this.studiensemester_ende = res.data.ende;
				});
		},
		getPromiseFunc(start, end) {
			return [
				this.$api.call(
					ApiLvPlan.eventsStgOrg(
						start,
						end,
						this.formData.stgkz,
						this.formData.sem,
						this.formData.verband,
						this.formData.gruppe,
					),
				),
			];
		},
		async fetchAuthInfo() {
			const authInfoResponse = await this.$api.call(ApiAuthinfo.getAuthInfo());

			const authInfo = authInfoResponse.data;
			this.uid = authInfo.uid;
			this.isMitarbeiter = authInfo.isMitarbeiter;
			this.isStudent = authInfo.isStudent;
		},
		async fetchViewData() {
			const viewDataResponse = await this.$api.call(ApiStgOrgLvPlan.getStgOrgLvPlanViewData());

			const viewData = viewDataResponse.data;
			this.listStg = viewData.studiengaenge;
		},
	},
	async created(){
		await this.fetchAuthInfo();
    	await this.fetchViewData();

		if (this.propsViewData) {
			this.formData.stgkz = this.propsViewData.stgkz ? this.propsViewData.stgkz: null;
			this.formData.sem = this.propsViewData.sem ? this.propsViewData.sem: null;
			this.formData.verband = this.propsViewData.verband ? this.propsViewData.verband: null;
			this.formData.gruppe = this.propsViewData.gruppe ? this.propsViewData.gruppe: null;

			//ensure loading dropdown arrays for version propsView
			if(!this.listVerband.length && this.formData.sem)
			{
				this.loadListVerband();
			}
			if(!this.listGroup.length && this.formData.verband)
			{
				this.loadListGroup();
			}
		}

		if (this.formData.stgkz) {
			this.loadLvPlan();
		}
	},
	template: `
	<div class="cis-lvplan-stg-org d-flex flex-column h-100">

		<div class="mt-3">
	 		<form-form class="row row-cols-1 row-cols-md-2 row-cols-lg-4 row-cols-xl-5 g-3 mb-3">
	 			<form-input
	 				type="select"
	 				v-model="formData.stgkz"
	 				@change="loadListSem(formData.stgkz)"
	 				>
					<option :value="null" selected>{{ $p.t('LvPlan/chooseStg') }}</option>
					<option
						v-for="stg in listStg"
						:key="stg.studiengang_kz"
						:value="stg.studiengang_kz"
						>
						{{ stg.kurzbzlang }} ({{ stg.bezeichnung }})
					</option>
	 			</form-input>
	 			<form-input
	 				type="select"
	 				v-model="formData.sem"
	 				@change="loadListVerband()"
	 				@click="loadListSem(formData.stgkz)"
	 				>
						<option :value="null" selected>Semester</option>
						<option
							v-for="sem in listSem"
							:key="sem"
							:value="sem"
							>
							{{ sem }}
						</option>
	 			</form-input>
	 			<form-input
	 				type="select"
	 				v-model="formData.verband"
	 				@change="loadListGroup()"
	 				>
	 					<option :value="null" selected>{{ $p.t('lehre/verband') }} </option>
					<option
						v-for="verband in listVerband"
						:key="verband"
						:value="verband"
						>
						{{ verband }}
					</option>
	 			</form-input>
	 			<form-input
	 				type="select"
	 				v-model="formData.gruppe"
	 				>
	 				<option :value="null" selected>{{ $p.t('gruppenmanagement/gruppe') }}</option>
						<option
							v-for="group in listGroup"
							:key="group"
							:value="group"
							>
							{{ group }}
						</option>
	 			</form-input>
				<button type="button" class="btn btn-secondary" @click="loadLvPlan">{{ $p.t('LvPlan/loadLvPlan') }}</button>

	 		</form-form>
	 	</div>

		<template v-if="timezone">
			<fhc-calendar
				v-if="propsViewData && propsViewData.stgkz"
				ref="calendar"
				v-model:lv="formData"
				:timezone="timezone"
				:get-promise-func="getPromiseFunc"
				:date="currentDay"
				:mode="currentMode"
				@update:date="handleChangeDate"
				@update:mode="handleChangeMode"
				@update:range="updateRange"
				class="responsive-calendar"
			>
				<div
					v-if="downloadLinks"
					class="d-flex gap-1 justify-items-start"
				>
					<div v-for="{ title, icon, link } in downloadLinks">
						<a
							:href="link"
							:aria-label="title"
							class="py-1 btn btn-outline-secondary"
						>
							<div class="d-flex flex-column">
								<i aria-hidden="true" :class="icon"></i>
								<span style="font-size:.5rem">{{ title }}</span>
							</div>
						</a>
					</div>
				</div>
			</fhc-calendar>
		</template>
	</div>
	`,
};