import { createContext, useContext } from 'react';
import { DEMO_ROLES, demoEntryUrl, type DemoRole } from '../../utils/demoEntrance';
import DemoExitLink from './DemoExitLink';

/** The role of the admitted demo visit the app runs in; absent everywhere else. */
export const DemoVisitRoleContext = createContext<DemoRole | undefined>(undefined);

// The way to the other roles from inside a visit. Each link opens that role's entry on this origin, which offers
// the switch within the same clinic; nothing is switched from here.
const DemoRoleSwitch = ({ role }: { role: DemoRole }) => {
    const others = (Object.keys(DEMO_ROLES) as DemoRole[])
        .filter((other) => other !== role)
        .map((other) => ({ other, href: demoEntryUrl(other) }))
        .filter((link): link is { other: DemoRole; href: string } => !!link.href);
    return (
        <nav aria-label="Demo roles" className="w-full border-b border-[var(--border)] px-4 py-2 text-center text-sm">
            {'You are in the demo as ' + DEMO_ROLES[role].label.toLowerCase() + '.'}
            {others.length > 0 && ' Try it as '}
            {others.map(({ other, href }, index) => (
                <span key={other}>
                    {index > 0 && (index === others.length - 1 ? ' or ' : ', ')}
                    <a href={href}>{DEMO_ROLES[other].label.toLowerCase()}</a>
                </span>
            ))}
            {others.length > 0 && '.'}
            <span className="ml-3 inline-block"><DemoExitLink>Exit demo</DemoExitLink></span>
        </nav>
    );
};

// The role links inside a locked modal that would otherwise hide them: in an admitted demo visit only, and nothing
// else of the app is opened by them.
export const DemoGateRoleSwitch = () => {
    const role = useContext(DemoVisitRoleContext);
    return role ? <DemoRoleSwitch role={role} /> : null;
};

export default DemoRoleSwitch;