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


export default function Home() {
    const sensorData = useTracker(() => {
        return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
    });

    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 (
            <>
                <SensorCardDeck />

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