import { CheckIcon, InfoIcon, SirenIcon, WarningIcon } from "@chopin/icons";
import { IconLabel, MiniBars, ProgressBar, Sparkline } from "@chopin/visuals";

import { AuditPlate } from "./frame";
import { IconCatalogue } from "./icons";

const COLOURS = [
	["Page", "--color-page"],
	["Ground", "--color-ground"],
	["Inset", "--color-inset"],
	["Selected", "--color-selected"],
	["Primary text", "--color-text-primary"],
	["Secondary text", "--color-text-secondary"],
	["Tertiary text", "--color-text-tertiary"],
	["Quaternary text", "--color-text-quaternary"],
	["Default icon", "--color-icon"],
	["Brand", "--color-brand"],
	["Brand hover", "--color-brand-hover"],
	["Brand wash", "--color-brand-wash"],
	["Success", "--color-success"],
	["Success wash", "--color-success-wash"],
	["Warning", "--color-warning"],
	["Warning wash", "--color-warning-wash"],
	["Destructive", "--color-destructive"],
	["Destructive wash", "--color-destructive-wash"],
] as const;

const TYPE = [
	["Chrome and labels", "13px / 20px line-height", "--text-sm", "--text-sm--line-height"],
	["Document prose", "15px / 22px line-height", "--text-base", "--text-base--line-height"],
	["Subheading", "17px / 27px line-height", "--text-lg", "--text-lg--line-height"],
	["Section heading", "24px / 30px line-height", "--text-xl", "--text-xl--line-height"],
	["Document title", "32px / 38px line-height", "--text-2xl", "--text-2xl--line-height"],
] as const;

const SPACING = [2, 4, 6, 8, 12, 16, 24, 32] as const;

const RADII = [
	["Small", "--radius-sm"],
	["Medium", "--radius-md"],
	["Large", "--radius-lg"],
	["Extra large", "--radius-xl"],
] as const;

const SHADOWS = [
	["Subtle resting", "--shadow-resting"],
	["Strong resting", "--shadow-resting-strong"],
	["Raised", "--shadow-raised"],
	["Overlay", "--shadow-overlay"],
] as const;

const ICON_LABELS = [
	["neutral", InfoIcon, "Neutral"],
	["success", CheckIcon, "Success"],
	["warning", WarningIcon, "Warning"],
	["danger", SirenIcon, "Danger"],
] as const;

const SPARKLINES = [
	["neutral", "Neutral activity", [8, 6, 7, 4]],
	["success", "Successful activity", [3, 5, 4, 8]],
	["warning", "Steady warning", [5, 5, 5]],
	["danger", "Danger sample", [4]],
] as const;

const MINI_BARS = [
	["neutral", "neutral volume", [8, 4, 6, 3, 7, 5]],
	["success", "success volume", [1, 3, 2, 4, 6, 5]],
	["warning", "warning volume", [6, 5, 4, 5, 3, 4]],
	["danger", "danger volume", [1, 2, 4, 3, 5, 7]],
] as const;

const PROGRESS_BARS = [
	["Not started", 0],
	["In progress", 62.5],
	["Complete", 100],
] as const;

export function Foundations() {
	return (
		<>
			<AuditPlate
				item="colours"
				title="Colour roles"
				description="Semantic roles on the light system."
			>
				<div className="design-audit-swatch-grid">
					{COLOURS.map(([label, token]) => (
						<figure key={token}>
							<span style={{ background: `var(${token})` }} />
							<figcaption>
								<strong>{label}</strong>
								<code>{token}</code>
							</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="typography"
				title="Typography"
				description="The complete five-rung type scale."
			>
				<div className="design-audit-type-stack">
					{TYPE.map(([label, measurement, size, lineHeight]) => (
						<div key={size} style={{ fontSize: `var(${size})`, lineHeight: `var(${lineHeight})` }}>
							<div className="design-audit-type-label">
								<span>{label}</span>
								<code>{measurement}</code>
							</div>
							<strong>Several people and a Planner share one document.</strong>
						</div>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="spacing"
				title="Spacing"
				description="Common intervals on the four-pixel base scale."
			>
				<div className="design-audit-spacing-scale">
					{SPACING.map(value => (
						<div key={value}>
							<code>{value}px</code>
							<span style={{ width: value }} />
						</div>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="radii"
				title="Radii"
				description="Four roles from controls to the document page."
			>
				<div className="design-audit-token-row">
					{RADII.map(([label, token]) => (
						<figure key={token}>
							<span style={{ borderRadius: `var(${token})` }} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="shadows"
				title="Elevation"
				description="Subtle and strong resting surfaces, followed by raised and overlay depth."
			>
				<div className="design-audit-token-row">
					{SHADOWS.map(([label, token]) => (
						<figure key={token}>
							<span style={{ boxShadow: `var(${token})` }} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="icons"
				title="Icons"
				description="Every Nucleo icon currently used by the interface."
			>
				<IconCatalogue />
			</AuditPlate>
			<AuditPlate
				item="icon-label"
				title="Icon labels"
				description="Compact semantic labels for status and supporting metadata."
			>
				<div className="design-audit-icon-labels">
					{ICON_LABELS.map(([tone, icon, label]) => (
						<IconLabel icon={icon} key={tone} label={label} tone={tone} />
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="sparkline"
				title="Sparklines"
				description="Compact semantic trends without axes or interaction."
			>
				<div className="design-audit-sparklines">
					{SPARKLINES.map(([tone, label, values]) => (
						<figure key={tone}>
							<Sparkline label={label} tone={tone} values={values} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="mini-bars"
				title="Mini bars"
				description="Compact semantic distributions using the latest five values."
			>
				<div className="design-audit-mini-bars">
					{MINI_BARS.map(([tone, label, values]) => (
						<figure key={tone}>
							<MiniBars label={label} tone={tone} values={values} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
			<AuditPlate
				item="progress-bar"
				title="Progress bars"
				description="Compact completion indicators from zero through complete."
			>
				<div className="design-audit-progress-bars">
					{PROGRESS_BARS.map(([label, value]) => (
						<figure key={label}>
							<ProgressBar label={label} value={value} />
							<figcaption>{label}</figcaption>
						</figure>
					))}
				</div>
			</AuditPlate>
		</>
	);
}