import React from 'react'
import {CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection, ActiveDeviceCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';

import {Col, Form, Row} from "react-bootstrap";

export default function Home() {

    const uniqueEspNames = _.uniq(SensorDataCollection.find({}, {
        sort: {device_id: 1}, fields: {device_id: true}
    }).fetch().map(function (x) {
        return x.device_id;
    }), true);

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

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

    const handleChange = (e) => {
        if (e.target.value === "") {
            console.log("No device selected!");
        } else {
            var doc = ActiveDeviceCollection.findOne({deviceName: deviceName.deviceName});
            ActiveDeviceCollection.update({_id: doc._id}, {$set: {deviceName: e.target.value}});
        }
    }


    if ((sensorData.length <= 0) || (deviceName.length <= 0) || (uniqueEspNames.length <= 0)) {
        return (
            <CardDeck>
                <Card>
                    <Card.Body>
                        <Card.Title>Loading!</Card.Title>
                        <Card.Text>Please wait...</Card.Text>
                    </Card.Body>
                </Card>
            </CardDeck>
        )
    } else {
        return (
            <>
                <Row>
                    <Col xs lg="2">
                        <h4>Devices:</h4>
                    </Col>
                </Row>
                <Row>
                    <Col xs lg="2">
                        <Form>
                            <Form.Group>
                                <Form.Control as="select" type="text" onChange={handleChange}>
                                    <option></option>
                                    {uniqueEspNames.map((espName, index) => {
                                        return <option key={index} value={espName}>{espName}</option>
                                    })}
                                </Form.Control>
                            </Form.Group>
                        </Form>
                    </Col>
                    <Col>
                        <h6>active device: {deviceName.deviceName}</h6>
                    </Col>
                </Row>

                <SensorCardDeck/>
                <Row>
                    <Col>
                        <ResponsiveContainer width='100%' height={350}>
                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
                                <Line type="monotone" dataKey="temperature" stroke="#10b5de"/>
                                <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
                                <XAxis dataKey="timeAsString"/>
                                <YAxis/>
                                <Tooltip/>
                                <Legend/>
                            </LineChart>
                        </ResponsiveContainer>
                    </Col>
                    <Col>
                        <ResponsiveContainer width='100%' height={350}>
                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
                                <Line type="monotone" dataKey="humidity" stroke="#ff6f00"/>
                                <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
                                <XAxis dataKey="timeAsString"/>
                                <YAxis/>
                                <Tooltip/>
                                <Legend/>
                            </LineChart>
                        </ResponsiveContainer>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <ResponsiveContainer width='100%' height={350}>
                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
                                <Line type="monotone" dataKey="brightness" stroke="#ffd500"/>
                                <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
                                <XAxis dataKey="timeAsString"/>
                                <YAxis/>
                                <Tooltip/>
                                <Legend/>
                            </LineChart>
                        </ResponsiveContainer>
                    </Col>
                    <Col>
                        <ResponsiveContainer width='100%' height={350}>
                            <LineChart data={sensorData} margin={{top: 50, right: 50, bottom: 25, left: 5}}>
                                <Line type="monotone" dataKey="moisture" stroke="#1c4399"/>
                                <CartesianGrid stroke="#ccc" strokeDasharray="5 5"/>
                                <XAxis dataKey="timeAsString"/>
                                <YAxis/>
                                <Tooltip/>
                                <Legend/>
                            </LineChart>
                        </ResponsiveContainer>
                    </Col>
                </Row>
            </>
        )
    }
}