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}});
        }
    }

    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>
        </>
    )
}