/* eslint-disable @typescript-eslint/no-unused-vars */
import "./dashboard.scss";
import React, { useContext } from "react";
import AuthContext from "../../context/auth-context";
import RoleBox from "./RoleBox/RoleBox";
import DashboardApps from "./DashboardApps/DashboardApps";
import DashboardServices from "./DashboardServices/DashboardServices";
import dashboardNewsImage from "../../assets/images/dashboardNews.png";
import NewsArticle from "../UI/NewsArticle/NewsArticle";

const newsArticle = {
	image: dashboardNewsImage,
	title: "Τι είναι η πλατφόρμα",
	subtitle: "D.U.A. (Demokritos User Account)",
	content: "είναι η διαδικτυακή πλατφόρμα που ενοποιεί όλες τις καθημερινές λειτουργίες του ΕΚΕΦΕ \"Δ\" σε ένα σύστημα εύκολα προσβάσιμο, σχεδιασμένο να διευκολύνει τον χρήστη, να τον καθοδηγεί και να τον ενημερώνει. Δημιουργήθηκε από το γραφείο Ηλεκτρονικής Διακυβέρνησης λόγο της ανάγκης, να υπάρχει ένα κεντρικό σημείο, στο οποίο θα μπορούν να έχουν πρόσβαση όλοι οι υπάλληλοι του ΕΚΕΦΕ 'Δ' και ανάλογα με τον ρόλο που έχουν στον οργανισμό να έχουν πρόσβαση στις αντίστοιχες υπηρεσίες.",
}
const Dashboard = () => {
	const { currentUser } = useContext(AuthContext);
	let found = currentUser && currentUser.roles.find(role => role === "dua_user");

	return (

		<div id="dashboard">
			<section className={"news mb-7"}>
				<div id={'dashboardNews'} className="news-container">
					<NewsArticle
						image={newsArticle.image}
						title={newsArticle.title}
						subtitle={newsArticle.subtitle}
						content={newsArticle.content}
					/>
				</div>
			</section>

			<section className={"application mb-7"}>
				<DashboardApps />
			</section>
			
			<section className={"services mb-7"}>
				{
				// @ts-ignore	
				<DashboardServices key={found} role={found} permissions={currentUser.permissions[found] || []}/>
				}			
			</section>
			<section className={"roles"}>
				<p>Οι ρόλοι μου</p>
				{currentUser &&
					currentUser.roles.map((role) => {

						// @ts-ignore
						return (
							role !== 'dua_user' &&
							<RoleBox
								key={role}
								role={role}
								permissions={currentUser.permissions[role] || []}
							/>
						);
					})}
			</section>		
		</div>
	);
};

export default Dashboard;