import React, { ReactNode, useContext, 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";

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

const RoleBox = ({ role, permissions }: RoleBoxProps) => {

	const [isOpen, setIsOpen] = useState(false);
	const {translateRole} = useTranslations()


	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.keys(permissions).map((permission) => {

						const [ms, module] = permission.split(".");
						const serviceKey = role + "." + ms + "." + module;
						return (
							<div className={"col-clg-4"} key={serviceKey}>
								<ServiceBox
									role={role}
									microservice={ms as Microservice}
									module={module}
								/>
							</div>
						);
					})}
				</div>
			</div>
		</div>
	);
};

export default RoleBox;