import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Type, User} from "@/interfaces/user";
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {Avatar} from "primereact/avatar";
import {useEffect, useState} from "react";
import {FilterMatchMode, FilterOperator} from "primereact/api";
import useUsers from "@/hooks/useUsers";
import {DataTable} from "primereact/datatable";
import {Column} from "primereact/column";
import {capitalize} from "lodash";
import {levelCalculator} from "@/resources/level";
import {Dropdown} from "primereact/dropdown";

export const getServerSideProps = withIronSessionSsr(({req, res}) => {
	const user = req.session.user;

	if (!user) {
		res.setHeader("location", "/login");
		res.statusCode = 302;
		res.end();
		return {
			props: {
				user: null,
			},
		};
	}

	return {
		props: {user: req.session.user},
	};
}, sessionOptions);

export default function Users({user}: {user: User}) {
	const {users, isLoading} = useUsers();
	const [filters] = useState({
		name: {value: null, matchMode: FilterMatchMode.CONTAINS},
		type: {value: null, matchMode: FilterMatchMode.EQUALS},
	});

	const userTypes: Type[] = ["admin", "developer", "owner", "student", "teacher"];

	const typeRowFilterTemplate = (options: any) => {
		return (
			<Dropdown
				value={options.value}
				options={userTypes.map(capitalize)}
				onChange={(e) => options.filterApplyCallback(e.value)}
				placeholder="Select One"
				className="p-column-filter"
				showClear
				style={{minWidth: "12rem"}}
			/>
		);
	};

	return (
		<>
			<Head>
				<title>IELTS GPT | Users</title>
				<meta
					name="description"
					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
				/>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
				<link rel="icon" href="/favicon.ico" />
			</Head>
			<main className="w-full h-full min-h-[100vh] flex flex-col items-center bg-neutral-100">
				<Navbar profilePicture={user.profilePicture} />
				<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
					<DataTable
						dataKey="id"
						filters={filters}
						filterDisplay="row"
						className="w-full h-full"
						loading={isLoading}
						value={users}
						removableSort
						stripedRows
						paginator
						rows={5}
						rowsPerPageOptions={[5, 10, 25, 50]}
						tableStyle={{minWidth: "50rem"}}>
						<Column field="id" sortable header="ID" />
						<Column field="name" sortable header="Name" filter filterPlaceholder="Search by name" />
						<Column field="experience" sortable header="Experience" />
						<Column field="experience" sortable header="Level" body={(data: User) => levelCalculator(data.experience).currentLevel} />
						<Column
							field="type"
							showFilterMenu={false}
							filter
							filterElement={typeRowFilterTemplate}
							sortable
							header="Type"
							body={(data: User) => capitalize(data.type)}
						/>
					</DataTable>
				</div>
			</main>
		</>
	);
}
