@using System;
@using Sandbox;
@using Sandbox.UI;
@inherits PanelComponent

<root class="theme-preview-root">
	<div class="theme-preview-backdrop">
		<img class="theme-background-sample" />
		<div class="theme-preview-backdrop-overlay"></div>
	</div>

	<div class="theme-preview-board">
		<div class="theme-preview-header">
			<img class="theme-logo-sample" />
			<div class="theme-preview-header-copy">
				<label class="menu-title theme-preview-title">@ActiveTheme?.GameTitle</label>
				<label class="menu-subtitle theme-preview-subtitle">@ActiveTheme?.Subtitle</label>
			</div>
			<label class="theme-preview-meta">OMRTHEME LIVE REFERENCE</label>
		</div>

		<div class="theme-preview-columns">
			<div class="theme-preview-column">
				<div class="theme-preview-section theme-surface-menu-shell">
					<label class="page-heading theme-preview-heading">TYPOGRAPHY</label>
					<label class="theme-preview-body">Body / description text shows the readable secondary role and Body formatting.</label>
					<label class="theme-preview-meta">META / LABEL TEXT</label>
					<label class="theme-preview-number">03 : 47</label>
				</div>

				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">TEXT PALETTE</label>
					<div class="theme-text-row"><label class="theme-text-primary">PRIMARY</label><label class="theme-text-secondary">SECONDARY</label><label class="theme-text-muted">MUTED</label></div>
					<div class="theme-text-row"><label class="theme-text-accent">ACCENT</label><label class="theme-text-positive">POSITIVE</label><label class="theme-text-danger">DANGER</label><label class="theme-text-error">ERROR</label></div>
				</div>

				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">INTERACTIVE STATES</label>
					<label class="theme-preview-meta">NEUTRAL</label>
					<div class="theme-chip-row">
						<div class="theme-interactive-chip theme-interactive-neutral-normal">NORMAL</div>
						<div class="theme-interactive-chip theme-interactive-neutral-hover">HOVER</div>
						<div class="theme-interactive-chip theme-interactive-neutral-pressed">PRESSED</div>
					</div>
					<label class="theme-preview-meta">ACCENT</label>
					<div class="theme-chip-row">
						<div class="theme-interactive-chip theme-interactive-accent-normal">NORMAL</div>
						<div class="theme-interactive-chip theme-interactive-accent-hover">HOVER</div>
						<div class="theme-interactive-chip theme-interactive-accent-pressed">PRESSED</div>
						<div class="theme-interactive-chip theme-interactive-accent-selected">SELECTED</div>
						<div class="theme-interactive-chip theme-interactive-accent-soft">SOFT</div>
					</div>
					<label class="theme-preview-meta">POSITIVE</label>
					<div class="theme-chip-row">
						<div class="theme-interactive-chip theme-interactive-positive-normal">NORMAL</div>
						<div class="theme-interactive-chip theme-interactive-positive-hover">HOVER</div>
						<div class="theme-interactive-chip theme-interactive-positive-pressed">PRESSED</div>
						<div class="theme-interactive-chip theme-interactive-positive-selected">SELECTED</div>
						<div class="theme-interactive-chip theme-interactive-positive-soft">SOFT</div>
					</div>
					<label class="theme-preview-meta">DANGER</label>
					<div class="theme-chip-row">
						<div class="theme-interactive-chip theme-interactive-danger-normal">NORMAL</div>
						<div class="theme-interactive-chip theme-interactive-danger-hover">HOVER</div>
						<div class="theme-interactive-chip theme-interactive-danger-pressed">PRESSED</div>
						<div class="theme-interactive-chip theme-interactive-danger-soft">SOFT</div>
					</div>
				</div>
			</div>

			<div class="theme-preview-column">
				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">OVERLAYS / CANVAS</label>
					<div class="theme-overlay-row">
						<div class="theme-overlay-sample theme-overlay-menu-canvas">MENU CANVAS</div>
						<div class="theme-overlay-sample theme-overlay-menu">MENU OVERLAY</div>
						<div class="theme-overlay-sample theme-overlay-pause">PAUSE OVERLAY</div>
						<div class="theme-overlay-sample theme-overlay-decision">DECISION OVERLAY</div>
					</div>
				</div>

				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">MENU / PAUSE SURFACES</label>
					<div class="theme-surface-grid">
						<div class="theme-surface-sample theme-surface-menu-shell">MENU SHELL</div>
						<div class="theme-surface-sample theme-surface-soft">SOFT PANEL</div>
						<div class="theme-surface-sample theme-surface-control">CONTROL</div>
						<div class="theme-surface-sample theme-surface-notice">NOTICE</div>
						<div class="theme-surface-sample theme-surface-pause">PAUSE PANEL</div>
					</div>
				</div>

				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">HUD SURFACES</label>
					<div class="theme-surface-grid">
						<div class="theme-surface-sample theme-surface-hud">DEFAULT HUD</div>
						<div class="theme-surface-sample theme-surface-timer">TIMER</div>
						<div class="theme-surface-sample theme-surface-pot">POT</div>
						<div class="theme-surface-sample theme-surface-ammo">AMMO</div>
						<div class="theme-surface-sample theme-surface-decision">DECISION</div>
						<div class="theme-surface-sample theme-surface-sandbox">SANDBOX</div>
						<div class="theme-surface-sample theme-surface-warmup">WARMUP</div>
						<div class="theme-surface-sample theme-surface-sudden">SUDDEN DEATH</div>
					</div>
				</div>

				<div class="theme-preview-section theme-surface-soft">
					<label class="page-heading theme-preview-heading">HEALTH & BORDERS</label>
					<div class="theme-health-preview theme-surface-track"><div class="theme-health-local"></div></div>
					<div class="theme-health-preview theme-surface-track"><div class="theme-health-opponent"></div></div>
					<div class="theme-border-row">
						<div class="theme-border-sample theme-border-primary">PRIMARY</div>
						<div class="theme-border-sample theme-border-soft">SOFT</div>
						<div class="theme-border-sample theme-border-strong">STRONG</div>
						<div class="theme-border-sample theme-border-accent">ACCENT</div>
						<div class="theme-border-sample theme-border-positive">POSITIVE</div>
						<div class="theme-border-sample theme-border-danger">DANGER</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</root>

@code
{
	[Property, Group( "UI Foundation" ), Title( "Theme" )]
	public OMRUITheme Theme { get; set; }

	public OMRUITheme ActiveTheme => Theme ?? OMRUIResources.DefaultTheme;

	private int _lastThemeHash = int.MinValue;
	private float _nextRefresh;

	protected override void OnUpdate()
	{
		base.OnUpdate();

		int hash = ActiveTheme?.ContentHash() ?? 0;
		if ( hash == _lastThemeHash && RealTime.Now < _nextRefresh )
			return;

		OMRUIRuntimeStyle.ApplyThemePreview( Panel, ActiveTheme );
		_lastThemeHash = hash;
		_nextRefresh = RealTime.Now + 0.15f;
	}
}