import type { JSX } from "@solidjs/web";

import { CSPContext, type CSPContextValue } from "./csp-context.ts";

export interface CSPProviderProps {
	children?: JSX.Element;
	/**
	 * The nonce value to apply to inline `<style>` and `<script>` tags
	 * injected by Base UI components for CSP compliance.
	 */
	nonce?: string | undefined;
	/**
	 * When `true`, descendants skip injecting inline `<style>` elements
	 * (e.g. the scroll-area's disable-scrollbar stylesheet). Use when your
	 * CSP forbids inline styles outright, even with a valid nonce, and
	 * provide the styles through an external stylesheet instead.
	 *
	 * @default false
	 */
	disableStyleElements?: boolean | undefined;
}

/**
 * Provides a Content Security Policy (CSP) nonce that Base UI components
 * attach to inline `<style>` and `<script>` tags.
 *
 * Solid 2 uses the context value itself as the provider component (no
 * `.Provider`). The context value is a plain object with a getter so the
 * `nonce` accessor tracks `props.nonce` without a top-level reactive read.
 */
export function CSPProvider(props: CSPProviderProps): JSX.Element {
	const contextValue: CSPContextValue = {
		nonce: () => props.nonce,
		disableStyleElements: () => props.disableStyleElements === true,
	};

	return <CSPContext value={contextValue}>{props.children}</CSPContext>;
}