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

export default function Home() {
    // Return all documents of the configuredDevices collection.
    const configuredDevices = useTracker(() => {
        return ConfiguredDevicesCollection.find().fetch();
    });

    // Return the soil type of the given plant type.
    function getSoil(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.dirtType
    }

    // Return the permanent wilting point of the given plant type.
    function getPermWilPoint(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.soilMoisture.pwp
    }

    // Return the field capacity of the given plant type.
    function getFieldCap(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.soilMoisture.fc
    }

    // Return the minimal temperature of the given plant type.
    function getMinTemp(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.temperature.minTemp
    }

    // Return the maximal temperature of the given plant type.
    function getMaxTemp(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.temperature.maxTemp
    }

    // Return the minimal lux value of the given plant type.
    function getMinLux(type) {
        const plantType = PlantTypesCollection.findOne({plantType: type});
        return plantType.data.light.minLux
    }


    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={'mode'}>Mode</th>
                        <th key={'pwp'}>Permanent Wilting Point</th>
                        <th key={'fc'}>Field Capacity</th>
                        <th key={'minTemp'}>Min Temperature</th>
                        <th key={'maxTemp'}>Max 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={'mode-' + index}>{device.mode}</td>
                            <td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
                            <td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
                            <td key={'minTemp-' + index}>{getMinTemp(device.type) + " °C"}</td>
                            <td key={'maxTemp-' + index}>{getMaxTemp(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>
        </>
    )
}