<template>
	<section v-if="hasSensors" id="sensors" class="plugin">
		<table class="table table-sm table-borderless">
			<thead>
				<tr>
					<th scope="col">SENSORS</th>
					<th scope="col" class="text-end"></th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(sensor, sensorId) in sensors" :key="sensorId">
					<td scope="row">
						{{ sensor.label }}
					</td>
					<td class="text-end" :class="getDecoration(sensor.label)">
						{{ sensor.value }}{{ sensor.unit }}
					</td>
				</tr>
			</tbody>
		</table>
	</section>
</template>

<script>
import { GlancesHelper } from "../services.js";
import { store } from "../store.js";

export default {
	props: {
		data: {
			type: Object,
		},
	},
	data() {
		return {
			store,
		};
	},
	computed: {
		args() {
			return this.store.args || {};
		},
		stats() {
			return this.data.stats["sensors"];
		},
		view() {
			return this.data.views["sensors"];
		},
		sensors() {
			return (
				this.stats
					// .filter((sensor) => {
					//     // prettier-ignore
					//     const isEmpty = (Array.isArray(sensor.value) && sensor.value.length === 0) || sensor.value === 0;
					//     return !isEmpty;
					// })
					.map((sensor) => {
						if (
							this.args.fahrenheit &&
							sensor.type != "battery" &&
							sensor.type != "fan_speed"
						) {
							return {
								...sensor,
								// prettier-ignore
								value: parseFloat(sensor.value * 1.8 + 32).toFixed(1),
								unit: "F",
							};
						}
						return sensor;
					})
			);
		},
		hasSensors() {
			return this.sensors.length > 0;
		},
	},
	methods: {
		getDecoration(key) {
			if (this.view[key].value.decoration === undefined) {
				return;
			}
			return this.view[key].value.decoration.toLowerCase();
		},
	},
};
</script>