<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"
						) {
							// prettier-ignore
							sensor.value = parseFloat(sensor.value * 1.8 + 32).toFixed(1);
							sensor.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>