import type { ReactNode } from 'react';
import { Outlet } from 'react-router-dom';
import { environment } from '../../environments/environment';
import { Alert, AlertDescription, AlertTitle } from '../ui/alert';

export const SANDBOX_DISABLED_TITLE = 'Disabled in sandbox mode';

// Text message registration and marketing stay visible in the sandbox but nothing on them can be
// changed or sent. The disabled fieldset reaches every native control, and the server refuses anyway.
const SandboxDisabled = ({ children }: { children: ReactNode }) => {
    if (!environment.inSandboxMode) return <>{children}</>;
    return (
        <>
            <Alert className="mb-4">
                <AlertTitle>{SANDBOX_DISABLED_TITLE}</AlertTitle>
                <AlertDescription>You can see how this is set up, but nothing here can be changed or sent from the sandbox.</AlertDescription>
            </Alert>
            <fieldset disabled className="contents">{children}</fieldset>
        </>
    );
};

export const SandboxDisabledRoute = () => <SandboxDisabled><Outlet /></SandboxDisabled>;

export default SandboxDisabled;