const {
	Breadcrumbs,
	VerdictPill,
	Tabs,
	SourceCite,
	StepList,
	Callout,
	Card,
	Button,
	IconButton,
	Badge,
} = window.GlenAbbeyRulebookDesignSystem_08052d;
function RuleScreen({ ruleId, go, goTopic, openRule }) {
	const d = window.GA_DATA;
	const r = d.rules.find((x) => x.id === ruleId) || d.rules[0];
	const sourceHref =
		window.GA_DOC_URLS[r.doc] ||
		"https://www.glenabbeyhoa.com/document-library/";
	const [tab, setTab] = React.useState("Plain English");
	const [copied, setCopied] = React.useState(false);
	const related = d.rules
		.filter((x) => x.id !== r.id && x.topicId === r.topicId)
		.slice(0, 3);
	const copyLink = () => {
		navigator.clipboard.writeText(location.href).then(() => {
			setCopied(true);
			setTimeout(() => setCopied(false), 1800);
		});
	};
	return (
		<div className="ga-detail">
			<article>
				<Breadcrumbs
					items={[
						{ label: "Rules", href: "#/topics" },
						{ label: r.topic, href: "#/topics/" + r.topicId },
						r.title,
					]}
					style={{ marginBottom: "var(--space-5)" }}
				/>
				<VerdictPill verdict={r.verdict} label={r.verdictLabel} size="lg" />
				<h1 style={{ margin: "var(--space-4) 0 var(--space-3)" }}>{r.title}</h1>
				<p
					style={{
						fontSize: "var(--text-lead)",
						lineHeight: "var(--lh-lead)",
						color: "var(--text-body)",
						maxWidth: "var(--measure-prose)",
					}}
				>
					{r.summary}
				</p>
				<div
					style={{
						display: "flex",
						alignItems: "center",
						flexWrap: "wrap",
						gap: 10,
						marginBottom: "var(--space-6)",
					}}
				>
					<Badge tone="green">{r.doc}</Badge>
					<Badge>Updated {r.updated}</Badge>
					<span style={{ marginLeft: "auto", display: "flex", gap: 6 }}>
						<IconButton
							icon="printer"
							label="Print"
							onClick={() => window.print()}
						/>
						<IconButton
							icon={copied ? "check" : "link"}
							label={copied ? "Copied" : "Copy link"}
							onClick={copyLink}
						/>
					</span>
				</div>
				<Tabs
					items={["Plain English", "Exact text", "What to file"]}
					value={tab}
					onChange={setTab}
					style={{ marginBottom: "var(--space-6)" }}
				/>
				{tab === "Plain English" && (
					<div style={{ maxWidth: "var(--measure-prose)" }}>
						{r.plain.map((p, i) => (
							<p key={i} style={{ fontSize: "var(--text-body-md)" }}>
								{p}
							</p>
						))}
						{r.missed && (
							<Callout tone="warning" title="Commonly missed">
								{r.missed}
							</Callout>
						)}
					</div>
				)}
				{tab === "Exact text" && (
					<Card padding="lg" style={{ maxWidth: "var(--measure-prose)" }}>
						<SourceCite
							document={r.doc}
							section={r.sec}
							quote={r.quote}
							href={sourceHref}
						/>
						<p
							style={{
								marginTop: "var(--space-5)",
								marginBottom: 0,
								fontSize: "var(--text-body-sm)",
								color: "var(--text-muted)",
							}}
						>
							Quoted from the recorded document in the Association's Document
							Library. If the recorded text differs, the recorded text controls.
						</p>
					</Card>
				)}
				{tab === "What to file" && (
					<div style={{ maxWidth: "var(--measure-prose)" }}>
						{r.steps.length ? (
							<StepList steps={r.steps} />
						) : (
							<Callout tone="note" title="Nothing to file">
								This one needs no form — just follow the rule.
							</Callout>
						)}
						{!!r.steps.length && (
							<div style={{ marginTop: "var(--space-8)" }}>
								<Button
									variant="accent"
									iconLeft="file-plus"
									onClick={() => go("file")}
								>
									Start a DRB request
								</Button>
							</div>
						)}
					</div>
				)}
			</article>
			<aside className="ga-detail-aside">
				<Card tone="accent" padding="md">
					<div className="ga-eyebrow" style={{ marginBottom: 8 }}>
						Source
					</div>
					<SourceCite document={r.doc} section={r.sec} href={sourceHref} />
					<p
						style={{
							margin: "12px 0 0",
							fontSize: "var(--text-body-sm)",
							color: "var(--text-body)",
						}}
					>
						Read the full document in the official library.
					</p>
				</Card>
				{!!related.length && (
					<Card padding="md">
						<div className="ga-eyebrow" style={{ marginBottom: 10 }}>
							Related
						</div>
						<div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
							{related.map((x) => (
								<a
									key={x.id}
									href={"#/rule/" + x.id}
									style={{
										fontSize: "var(--text-body-sm)",
										textDecoration: "none",
									}}
								>
									{x.title}
								</a>
							))}
						</div>
					</Card>
				)}
				<Card tone="inverse" padding="md">
					<div
						className="ga-eyebrow"
						style={{ color: "var(--green-300)", marginBottom: 6 }}
					>
						Still unsure?
					</div>
					<p
						style={{
							fontSize: "var(--text-body-sm)",
							color: "var(--green-100)",
							margin: "0 0 12px",
						}}
					>
						The management office answers questions like this all day.
					</p>
					<Button
						variant="secondary"
						size="sm"
						iconLeft="phone"
						fullWidth
						onClick={() => {
							location.href = "tel:7704429121";
						}}
					>
						770.442.9121
					</Button>
				</Card>
			</aside>
		</div>
	);
}
Object.assign(window, { RuleScreen });