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

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

    const sensorData = useTracker(() => {
        if (deviceId === null || deviceId === undefined) {
            return [];
        } else {
            return SensorDataCollection.find({device_id: deviceId.deviceId}, {
                sort: {timestamp: -1},
                limit: 61
            }).fetch().reverse();
        }
    });

    const configuredDevices = useTracker(() => {
        return ConfiguredDevicesCollection.find().fetch();
    });

    function getSoil(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.dirtType
    }

    function getPermWilPoint(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.soilMoisture.pwp
    }

    function getFieldCap(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.soilMoisture.fc
    }

    function getMinTemp(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.temperature.minTemp
    }

    function getMinLux(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.light.minLux
    }


    if ((sensorData.length <= 0)) {
        return (
            <CardDeck>
                <Card>
                    <Card.Body>
                        <Card.Title>Loading!</Card.Title>
                        <Card.Text>Please wait...</Card.Text>
                    </Card.Body>
                </Card>
            </CardDeck>
        )
    } else {
        return (
            <>
                <Table striped bordered hover responsive>
                    <thead>
                        <tr key={'head'}>
                            <th key={'#'}>#</th>
                            <th key={'nickname'}>Device Nickname</th>
                            <th key={'id'}>Device ID</th>
                            <th key={'type'}>Plant Type</th>
                            <th key={'soil'}>Soil Type</th>
                            <th key={'pwp'}>Permanent Wilting Point</th>
                            <th key={'fc'}>Field Capacity</th>
                            <th key={'temp'}>Min Temperature</th>
                            <th key={'brightness'}>Min Brightness</th>
                        </tr>
                    </thead>
                    <tbody>
                        {configuredDevices.map((device, index) => {
                            return <tr key={'body' + index}>
                                <td key={'#-' + index}>{index}</td>
                                <td key={'nickname-' + index}>{device.alias}</td>
                                <td key={'id-' + index}>{device.deviceId}</td>
                                <td key={'type-' + index}>{device.type}</td>
                                <td key={'soil-' + index}>{getSoil(device.type)}</td>
                                <td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
                                <td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
                                <td key={'temp-' + index}>{getMinTemp(device.type) + " °C"}</td>
                                <td key={'brightness-' + index}>{getMinLux(device.type) + " lux"}</td>
                            </tr>
                        })}
                    </tbody>
                </Table>
                <br></br>
                <h4>If your device is not visible in the table above, configure it here below.</h4>
                <br></br>
                <br></br>
                <Settings></Settings>
            </>
        )
    }
}