import React from 'react'
import { Card, CardDeck } from 'react-bootstrap';
import {ActiveDeviceCollection, SensorDataCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';

export default function SensorCardDeck() {
    const deviceName = useTracker(() => {
        return ActiveDeviceCollection.find().fetch()[0];
    });

    const sensorData = useTracker(() => {
        return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
    });

    return (
        <CardDeck>
            <Card>
                <Card.Body>
                    <Card.Title>Temperature</Card.Title>
                    <Card.Text>{sensorData[0].temperature} °C</Card.Text>
                </Card.Body>
            </Card>
            <Card>
                <Card.Body>
                    <Card.Title>Humidity</Card.Title>
                    <Card.Text>{sensorData[0].humidity} %</Card.Text>
                </Card.Body>
            </Card>
            <Card>
                <Card.Body>
                    <Card.Title>Brightness</Card.Title>
                    <Card.Text>{sensorData[0].brightness} lux</Card.Text>
                </Card.Body>
            </Card>
            <Card>
                <Card.Body>
                    <Card.Title>Moisture</Card.Title>
                    <Card.Text>{sensorData[0].moisture} %</Card.Text>
                </Card.Body>
            </Card>
        </CardDeck>
    )
}