import React, {ReactNode, useState} from "react";
import "./rolebox.scss";
import ServiceBox from "./ServiceBox";
import open from "../../../assets/images/right-arrow-small-blue.svg";
import Close from "../../SVG/Close";
import {Microservice, Role, RolePermissions} from "../../../models/EgovUser";
import useTranslations from "../../../hooks/useTranslations";
import useRole from "../../../hooks/useRole";

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

const RoleBox = ({role, permissions}: RoleBoxProps) => {
const activeRole= useRole()
    const [isOpen, setIsOpen] = useState(false);
    const {translateRole} = useTranslations()

    if (!permissions) return <></>


    return (
        <div id="rolebox" className={`rolebox ${isOpen ? "open" : "closed"}`}>
            <h4 className={"rolebox-head"} onClick={() => setIsOpen(!isOpen)}>
                <div className="rolebox-head--inner-container">
                    <div className="rolebox-dot"></div>
                    {/*@ts-ignore*/}
                    <p>{translateRole(role)}</p>
                </div>
                {isOpen ? (
                    <Close/>
                ) : (
                    <img src={open} alt="open-btn"/>
                )}
            </h4>
            <div className={`rolebox-body`}>
                <div className="row gy-4">
                    {/*{permissions && Object.entries(permissions).map(([permission, modulePermissionObject]) => {*/}

                    {/*    const [ms, module] = permission.split(".");*/}
                    {/*    const serviceKey = role + "." + ms + "." + module;*/}
                    {/*    if*/}
                    {/*        (ms === "difo" && module === "personal_folder" && activeRole !== 'dua_user')*/}
                    {/*     {*/}
                    {/*        return null;*/}
                    {/*    }*/}
                    {/*    return (*/}
                    {/*        <div className={"col-clg-4"} key={serviceKey}>*/}
                    {/*            <ServiceBox*/}
                    {/*                microservice={ms as Microservice}*/}
                    {/*                module={module}*/}
                    {/*                role={role}*/}
                    {/*                requiresExtraAuth={modulePermissionObject.extra_auth.length > 0}*/}
                    {/*            />*/}
                    {/*        </div>*/}
                    {/*    );*/}
                    {/*})}*/}
                    {permissions && Object.entries(permissions).map(([permission, modulePermissionObject]) => {

                        if (!modulePermissionObject.permissions.includes("list")) {
                            return null;
                        }

                        const [ms, module] = permission.split(".");
                        const serviceKey = role + "." + ms + "." + module;

                        if (ms === "hr_support" && module === "requests_management" && role !== "hr_manager") {
                            return null;
                        }

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

export default RoleBox;