const { CategoryTile, RuleCard, Tag, Switch, EmptyState, Button } =
	window.GlenAbbeyRulebookDesignSystem_08052d;
function TopicsScreen({ openRule, goTopic, go, initialTopic }) {
	const d = window.GA_DATA;
	const [filter, setFilter] = React.useState("all");
	const [plain, setPlain] = React.useState(false);
	const verdicts = [
		["all", "Everything"],
		["yes", "Allowed"],
		["ask", "Approval needed"],
		["no", "Not allowed"],
		["depends", "Depends"],
	];
	const activeTopic = initialTopic
		? d.topics.find((t) => t.id === initialTopic)
		: null;
	const list = d.rules.filter(
		(r) =>
			(filter === "all" || r.verdict === filter) &&
			(!initialTopic || r.topicId === initialTopic),
	);
	return (
		<div>
			<PageHead
				eyebrow={activeTopic ? "Topic" : "All topics"}
				title={activeTopic ? activeTopic.title : "Every rule, sorted by answer"}
				lead={
					activeTopic
						? activeTopic.desc
						: 'Filter by what the answer actually is. Most of the rulebook is "approval needed", not "no".'
				}
			/>
			<div className="ga-filterbar">
				{activeTopic && (
					<Tag active onRemove={() => go("topics")}>
						{activeTopic.title}
					</Tag>
				)}
				{verdicts.map(([v, l]) => (
					<Tag key={v} active={filter === v} onClick={() => setFilter(v)}>
						{l}
					</Tag>
				))}
				<div className="ga-filterbar-end">
					<Switch
						checked={plain}
						onChange={() => setPlain(!plain)}
						label="Hide summaries"
					/>
				</div>
			</div>
			<div
				style={{
					display: "flex",
					flexDirection: "column",
					gap: "var(--space-3)",
					marginBottom: "var(--space-12)",
				}}
			>
				{list.map((r) => (
					<RuleCard
						key={r.id}
						verdict={r.verdict}
						verdictLabel={r.verdictLabel}
						topic={r.topic}
						title={r.title}
						summary={plain ? undefined : r.summary}
						updated={r.updated}
						onClick={() => openRule(r.id)}
					/>
				))}
				{!list.length && (
					<EmptyState
						title="Nothing filed under that answer"
						action={
							<Button
								variant="secondary"
								size="sm"
								onClick={() => setFilter("all")}
							>
								Show everything
							</Button>
						}
					>
						We have not written up a rule with that answer yet.
					</EmptyState>
				)}
			</div>
			<PageHead eyebrow="By topic" title="Browse the shelves" />
			<div className="ga-tile-grid">
				{d.topics.map((t) => (
					<CategoryTile
						key={t.id}
						icon={t.icon}
						title={t.title}
						count={t.count}
						description={t.desc}
						onClick={() => goTopic(t.id)}
					/>
				))}
			</div>
		</div>
	);
}
Object.assign(window, { TopicsScreen });