import type { JSX } from "solid-js";
import { For, splitProps } from "solid-js";
import { useToastStore } from "./toast-store";

import type { ToastRegionProps } from "./toast.props";
export type { ToastRegionProps } from "./toast.props";

/** Region where toasts are rendered. Place once in your app root. */
export function ToastRegion(props: ToastRegionProps): JSX.Element {
	const [local, rest] = splitProps(props, ["limit", "label", "children"]);
	const toasts = useToastStore();
	const visible = () => toasts().slice(0, local.limit ?? 5);

	return (
		<div
			role="region"
			aria-label={local.label ?? "Notifications"}
			tabIndex={-1}
			{...rest}
		>
			<ol>
				<For each={visible()}>
					{(t) => (
						<li role="status" data-type={t.type}>
							<div>{t.title}</div>
							{t.description && <div>{t.description}</div>}
						</li>
					)}
				</For>
			</ol>
			{local.children}
		</div>
	);
}
