import React, {ReactNode, useContext} from "react";
import "./dashboard-services.scss";
import {Microservice, Role, RolePermissions} from "../../../models/EgovUser";
import SectionTitle from "../../UI/Typography/SectionTitle";
import DuaServiceBox from "./DuaServiceBox";
import AuthContext from "../../../context/auth-context";

type DashboardServicesProps = {
    children?: ReactNode;
    role: Role;
    permissions: RolePermissions;
};

const DashboardServices = ({role, permissions}: DashboardServicesProps) => {

    const {currentUser} = useContext(AuthContext);
    const workRelationId = currentUser?.work_relation_id

    return (
        <div className="dashboard-services">
            <SectionTitle>Υπηρεσίες D.U.A.</SectionTitle>
            <div className="dashboard-services--body">
                <div className="row gy-4">
                    {permissions && Object.entries(permissions).map(([permission, modulePermissionObject]) => {

                        const [ms, module] = permission.split(".");
                        const serviceKey = role + "." + ms + "." + module;
                        // 🔹 Skip conditions
                        if (
                            (ms === "difo" && workRelationId === 1 && module === "personal_folder") ||
                            (ms === "difo" && workRelationId === 1 && module === "alfa_ena") ||
                            (ms === "hr_support" && workRelationId === 2 && module === "personal_folder")
                        ) {
                            return null;
                        }
                        // 🔹 Ensure correct structure
                        const hasListPermission =
                            Array.isArray(modulePermissionObject?.permissions) &&
                            modulePermissionObject.permissions.includes("list");

                        if (!hasListPermission) return null;

                        return (
                            <div key={serviceKey} className={'col-cmd-6 col-clg-4'}>
                                <DuaServiceBox
                                    microservice={ms as Microservice}
                                    module={module}
                                    requiresExtraAuth={modulePermissionObject.extra_auth.length > 0}
                                />
                            </div>
                        );
                    })}
                </div>
            </div>

        </div>
    );
};

export default DashboardServices;

// import React, {ReactNode, useState} from "react";
// import "./dashboard-services.scss";
// import "../RoleBox/rolebox.scss";
// import {Microservice, Role, RolePermissions} from "../../../models/EgovUser";
// import SectionTitle from "../../UI/Typography/SectionTitle";
// import DuaServiceBox from "./DuaServiceBox";
// import open from "../../../assets/images/right-arrow-small-blue.svg";
// import Close from "../../SVG/Close";
//
// type DashboardServicesProps = {
//     children?: ReactNode;
//     role: Role;
//     permissions: RolePermissions;
// };
//
// const COLLAPSE_THRESHOLD = 9;
//
// const DashboardServices = ({role, permissions}: DashboardServicesProps) => {
//
//     const [isOpen, setIsOpen] = useState(false);
//
//     if (!permissions) return null;
//
//     const entries = Object.entries(permissions);
//     const isCollapsible = entries.length > COLLAPSE_THRESHOLD;
//
//     const servicesGrid = (
//         <div className="row gy-4">
//             {entries.map(([permission, modulePermissionObject]) => {
//                 const [ms, module] = permission.split(".");
//                 const serviceKey = role + "." + ms + "." + module;
//
//                 return (
//                     <div key={serviceKey} className={'col-cmd-6 col-clg-4'}>
//                         <DuaServiceBox
//                             microservice={ms as Microservice}
//                             module={module}
//                             requiresExtraAuth={modulePermissionObject.extra_auth.length > 0}
//                         />
//                     </div>
//                 );
//             })}
//         </div>
//     );
//
//     if (!isCollapsible) {
//         return (
//             <div className="dashboard-services">
//                 <SectionTitle>Υπηρεσίες D.U.A.</SectionTitle>
//                 <div className="dashboard-services--body">{servicesGrid}</div>
//             </div>
//         );
//     }
//
//     return (
//         <div className="dashboard-services">
//             <div className={`rolebox ${isOpen ? "open" : "closed"}`}>
//                 <h4 className="rolebox-head" onClick={() => setIsOpen(!isOpen)}>
//                     <div className="rolebox-head--inner-container">
//                         <div className="rolebox-dot"></div>
//                         <p>Υπηρεσίες D.U.A.</p>
//                     </div>
//                     {isOpen ? <Close/> : <img src={open} alt="open-btn"/>}
//                 </h4>
//                 <div className="rolebox-body">{servicesGrid}</div>
//             </div>
//         </div>
//     );
// };
//
// export default DashboardServices;