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

export default function SensorCardDeck() {
    // Return the document of the currently active device in the activeDevice collection.
    const deviceId = useTracker(() => {
        return ActiveDeviceCollection.find().fetch()[0];
    });

    // If the deviceId is not null or undefined, return the most recent document in the sensorData collection of the currently active device.
    const sensorData = useTracker(() => {
        if (deviceId === null || deviceId === undefined) {
            return undefined;
        } else {
            return SensorDataCollection.find({device_id: deviceId.deviceId}, {sort: {timestamp: -1}, limit: 1}).fetch();
        }
    });

    // If the deviceId is not null or undefined, return the document in the configuredDevices collection of the currently active device.
    const configurationData = useTracker(() => {
        if (deviceId === null || deviceId === undefined) {
            return undefined;
        } else {
            return ConfiguredDevicesCollection.findOne({deviceId: deviceId.deviceId});
        }
    });

    // If the configurationData is not null or undefined, return the configured plant type of the currently active device.
    const plantTypeData = useTracker(() => {
        if (configurationData === null || configurationData === undefined) {
            return undefined;
        } else {
            return PlantTypesCollection.findOne({plantType: configurationData.type});
        }
    });


    //If the data that is loaded from the database has not been fetched yet, show a loading screen. Else load the application.
    if (sensorData.length <= 0 || configurationData === undefined || deviceId === undefined || plantTypeData === undefined) {
        return (
            <CardDeck>
                <Card>
                    <Card.Body>
                        <Card.Title>Loading!</Card.Title>
                        <Card.Text>Please wait...</Card.Text>
                    </Card.Body>
                </Card>
            </CardDeck>
        )
    } else {
        return (
            <CardDeck>
                {(sensorData[0].temperature < plantTypeData.data.temperature.minTemp) || (sensorData[0].temperature > plantTypeData.data.temperature.maxTemp) ?
                    <Card border={'danger'}>
                        <Card.Body>
                            <Card.Title>Temperature</Card.Title>
                            <Card.Text>{sensorData[0].temperature} °C</Card.Text>
                        </Card.Body>
                    </Card> :
                    <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>
                {sensorData[0].moisture > plantTypeData.data.soilMoisture.sat ?
                    <Card border={'danger'}>
                        <Card.Body>
                            <Card.Title>Moisture</Card.Title>
                            <Card.Text>{sensorData[0].moisture} %</Card.Text>
                        </Card.Body>
                    </Card> :
                    <Card>
                        <Card.Body>
                            <Card.Title>Moisture</Card.Title>
                            <Card.Text>{sensorData[0].moisture} %</Card.Text>
                        </Card.Body>
                    </Card>}
            </CardDeck>
        )
    }
}