import { ElementsTooltip } from "@ax/components";
import type { IRole, ISite, ISiteRoles } from "@ax/types";

import RoleItem from "./RoleItem";

import * as S from "./style";

const UserRolesAndSites = (props: IUserRolesAndSitesProps): JSX.Element => {
	const { isSuperAdmin, userRoles, sites, roles, showRows: showRowsProp } = props;

	const globalSiteRole = userRoles.find((ur) => ur.siteId === "global");
	const globalRoles = globalSiteRole ? roles.filter((r) => globalSiteRole.roles.includes(r.id)) : [];

	const allSiteRole = userRoles.find((ur) => ur.siteId === "all");
	const allRoles = allSiteRole ? roles.filter((r) => allSiteRole.roles.includes(r.id)) : [];

	const siteRoles = userRoles.filter((ur) => ur.siteId !== "global" && ur.siteId !== "all");

	const showRows = showRowsProp !== undefined ? showRowsProp : isSuperAdmin || (!!allSiteRole && !globalSiteRole);

	return (
		<>
			<S.RolesContent>
				{isSuperAdmin && (
					<div data-testid="final-step-super-admin">
						<RoleItem
							title="You are a Super admin"
							description="You have full access to all features and their configuration. You have access to all sites."
							roles={[]}
							isSuperAdmin={isSuperAdmin}
						/>
					</div>
				)}
				{globalRoles.length > 0 && (
					<div data-testid="final-step-global-role">
						<RoleItem
							title="Global data permissions"
							description="You can access to Global data based on the permissions assigned to the role."
							roles={globalRoles}
						/>
					</div>
				)}
			</S.RolesContent>
			{(siteRoles.length > 0 || allRoles.length > 0) && !isSuperAdmin && (
				<S.SitesContent data-testid="final-step-sites-content">
					{!showRows && <S.SitesHeader>Access to Sites</S.SitesHeader>}
					{allRoles.length > 0 && (
						<RoleItem
							title="Access to All Sites"
							description="You can access to all existing and future sites depending on the permissions assigned to the role."
							roles={allRoles}
						/>
					)}
					<S.SitesGrid>
						{siteRoles.map((ur) => {
							const site = sites.find((s) => s.id === ur.siteId);
							if (!site) return null;

							const rolesString = roles
								?.filter((role: IRole) => ur.roles?.includes(role.id))
								.map((role: IRole) => role.name);

							const colors = rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
								const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
								prev[current] = color?.hex;
								return prev;
							}, {});

							return (
								<S.SiteCard key={site.id}>
									<S.SiteCardHeader>
										<S.SiteName>{site.name}</S.SiteName>
									</S.SiteCardHeader>
									<S.TagsRow>
										<ElementsTooltip
											elements={rolesString}
											maxChar={30}
											rounded={true}
											defaultElements={1}
											elementsPerRow={2}
											colors={colors}
										/>
									</S.TagsRow>
								</S.SiteCard>
							);
						})}
					</S.SitesGrid>
				</S.SitesContent>
			)}
		</>
	);
};

interface IUserRolesAndSitesProps {
	isSuperAdmin: boolean;
	userRoles: ISiteRoles[];
	sites: ISite[];
	roles: IRole[];
	showRows?: boolean;
}

export default UserRolesAndSites;
