#load "helpers.uce"

COMPONENT(Request& context)
{
	starter_register_js("components/gauges/common.js", context);
	starter_register_css("themes/common/css/gauges.css", context);

	String gauge_id = first(context.props["id"].to_string(), "arcgauge-" + std::to_string((u64)time()));
	String title = context.props["title"].to_string();
	String subtitle = context.props["subtitle"].to_string();
	String style = context.props["style"].to_string();
	DTree scale = context.props["scale"];

	<>
		<div class="arcgauge-set" id="<?= gauge_attr_id(gauge_id) ?>" style="<?= style ?>">
			<? if(title != "") { ?>
				<div class="arcgauge-set-header">
					<h3><?= title ?></h3>
					<? if(subtitle != "") { ?><p><?= subtitle ?></p><? } ?>
				</div>
			<? } ?>
			<div class="arcgauge-grid">
				<? context.props["items"].each([&](DTree item, String item_id_raw) {
					DTree merged = scale;
					item.each([&](DTree value, String key) { merged[key] = value; });
					String item_id = gauge_attr_id(item_id_raw);
					f64 value = float_val(first(merged["value"].to_string(), "0"));
					f64 max_value = float_val(first(merged["max"].to_string(), "100"));
					s32 precision = (s32)int_val(first(merged["precision"].to_string(), "1"));
					f64 pct = max_value > 0.0 ? gauge_clamp_value((value / max_value) * 100.0, 0.0, 100.0) : 0.0;
					f64 arc_length = round((pct / 100.0) * 157.08 * 10.0) / 10.0;
					String resolved_color = "";
					if(merged["color"].get_type_name() == "array")
						resolved_color = gauge_range_color(merged["color"], value);
					else
						resolved_color = merged["color"].to_string();
					if(resolved_color == "")
					{
						if(pct >= 85.0)
							resolved_color = "var(--error, #ef4444)";
						else if(pct >= 60.0)
							resolved_color = "var(--warning, #f59e0b)";
						else
							resolved_color = "var(--success, #10b981)";
					}
					String display_value = gauge_format_number(value, precision) + merged["unit"].to_string();
					String watermark_prefix = merged["watermark_prefix"].to_string();
					?><section class="arcgauge-card">
						<div class="arcgauge-label"><?= first(merged["label"].to_string(), item_id_raw) ?></div>
						<svg class="arcgauge-svg" viewBox="0 0 120 68" aria-hidden="true">
							<path class="arcgauge-track" d="M 10 60 A 50 50 0 0 1 110 60" fill="none" stroke-width="5" stroke-linecap="round"/>
							<path id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-arc" class="arcgauge-arc-dyn" d="M 10 60 A 50 50 0 0 1 110 60" fill="none" stroke="<?= resolved_color ?>" stroke-width="5" stroke-linecap="round" stroke-dasharray="<?= std::to_string(arc_length) ?> 157.08"/>
							<? if(watermark_prefix != "") { ?>
								<line id="<?= gauge_attr_id(watermark_prefix) ?>WmLo" class="arcgauge-watermark arcgauge-watermark-lo" x1="0" y1="0" x2="0" y2="0" opacity="0"/>
								<line id="<?= gauge_attr_id(watermark_prefix) ?>WmHi" class="arcgauge-watermark arcgauge-watermark-hi" x1="0" y1="0" x2="0" y2="0" opacity="0"/>
							<? } ?>
							<text id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-text" class="arcgauge-value" x="60" y="47" text-anchor="middle"><?= display_value ?></text>
							<text class="arcgauge-caption" x="60" y="62" text-anchor="middle"><?= first(merged["caption"].to_string(), "") ?></text>
						</svg>
						<div class="arcgauge-meta" id="<?= gauge_attr_id(gauge_id) ?>-<?= item_id ?>-meta"><?= first(merged["meta"].to_string(), "--") ?></div>
					</section><?
				}); ?>
			</div>
		</div>
		<? if(context.props["listen"].to_string() != "") { ?>
			<script>
			window.ArcgaugeComponents = window.ArcgaugeComponents || {
				start_listen : function(prop) {
					$.events.on('value-broadcast', function(data) {
						if(!prop.items || !prop.items[data.name]) return;
						const item = Object.assign({}, prop.scale || {}, prop.items[data.name]);
						GaugeComponents.updateArcGauge({
							arcId: prop.id + '-' + data.name + '-arc',
							textId: prop.id + '-' + data.name + '-text',
							metaId: prop.id + '-' + data.name + '-meta',
							value: Number(data.value),
							max: Number(item.max || 100),
							suffix: item.unit || '',
							precision: item.precision,
							watermarkPrefix: item.watermark_prefix || data.name,
							color: item.color,
							meta: data.meta != null ? data.meta : null
						});
					});
				}
			};
			ArcgaugeComponents.start_listen(<?: json_encode(context.props, '\'') ?>);
			</script>
		<? } ?>
	</>
}