import { useUser } from "../utils/users/UseUser.ts"; // Хук для получения информации о пользователе
import { Outlet, Link, useNavigate } from "react-router-dom"; // Композиция для маршрутизации
import React, { useEffect } from "react";
import {UserContextType} from "../types/users.ts";

export function DashboardLayout() {
    const { user, logout } = useUser() as UserContextType; // Получаем данные о пользователе
    const navigate = useNavigate(); // Получаем функцию для навигации

    // Проверяем, есть ли пользователь, если нет, редиректим на страницу логина
    useEffect(() => {
        if (!user) {
            navigate("/login/");
        }
    }, [navigate, user]);

    if (!user) {
        return null; // Если пользователь не найден, ничего не отображаем
    }


    // Определяем класс для активной ссылки
    const isActive = (path: string) => window.location.pathname.includes(path)? 'selected' : 'unselected';

    return (
        <div className="dashboard-layout">
            <div className="sidebar">
                <h1 className="logo">Pro-Fi</h1>
                <p className="role">{user.roleTitle || "Роль не опознана"}</p> {/* Отображаем текущую роль пользователя */}
                <nav className="navigation">
                    <Link to="/dashboard/staff" className={isActive('/dashboard/staff')}>Штат</Link>
                    <Link to="/dashboard/schools" className={isActive('/dashboard/schools')}>Школы</Link>
                    <Link to="/dashboard/events" className={isActive('/dashboard/events')}>Мероприятия</Link>
                    <Link to="/dashboard/students" className={isActive('/dashboard/students')}>Студенты</Link>
                    <Link to="/dashboard/reports" className={isActive('/dashboard/reports')}>Отчеты</Link>
                    <Link to="/dashboard/partners" className={isActive('/dashboard/partners')}>Партнеры</Link>
                    <Link to="/admin" className={isActive('/admin')}>Админ-панель</Link>
                    <button onClick={logout} className="logout">Выйти</button>
                </nav>
            </div>
            <div className="content">
                <Outlet />
            </div>
        </div>
    );
}