<script lang="ts">
	import type { SlaveStatus } from '$lib/messages';
	import type { SlaveLogData } from '$lib/slave-log';
	
	export let id: number;
	export let status: SlaveStatus;
	export let logData: SlaveLogData | undefined;
</script>

<div class="slave-content" style:--lightness={status.error ? "60%" : "100%"}>
	<h2><b>Slave #{id}</b></h2>
	
	<div class="log-collumn">
		<div class="log-entry"><div>Error:</div><div><b>{status.error}</b></div></div>
		<div class="log-entry"><div>Min. cell voltage:</div><div><b>{Math.round(status.minCellVolt*100)/100}V</b></div></div>
		<div class="log-entry"><div>Max. cell voltage:</div><div><b>{Math.round(status.maxCellVolt*100)/100}V</b></div></div>
		<div class="log-entry"><div>Max. temperature:</div><div><b>{Math.round(status.maxTemp*100)/100}°</b></div></div>
		<!-- <div>SoC</div>
		<div>{status.soc}</div> -->
		<!-- <div>Failed temperature sensors</div>
		<div>{logData?.failedTempSensors ?? 0}</div> -->
	</div>
	
	{#if logData}
		<div class="log-collumn">
			{#each logData.voltages as volt, i}
				{#if i < 15}
					<div class="log-entry" style:--hue={Math.max(((volt-2.5)*70.5), 0)}>
						<div>V{i}:</div><div><b>{Math.round(volt*100)/100}V</b></div>
					</div>
				{/if}
			{/each}
			{#each logData.temperatures as temp, i}
				{#if i > 33 && i < 44}
					<div class="log-entry" style:--hue={210-(temp*3.5)}>
						<div>T{i}:</div><div><b>{temp}°</b></div>
					</div>
				{/if}
			{/each}
		</div>
	{/if}
</div>

<style>
	.slave-content {
		display: flex;
		flex-direction: column;
		width: 12vw;
		padding: 2px;
		margin: 2px;
		border: 2px solid black;
		font-size: 14px;
		margin-top: 10px;
		background-color: hsl(0, 60%, --lightness);
	}
	
	.log-entry {
		display: grid;
		grid-template-columns: 5fr 3fr;
		margin: 2px;
		padding: 2px;
		background-color: hsl(var(--hue), 80%, 80%);
	}

	.log-collumn {
		display: flex;
		flex-direction: column;
	}

	h2 {
		text-align: center;
	}
</style>