import React, {useEffect, useState} from 'react' // useState to rerender the view each time something changed
import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import SensorCardDeck from './SensorCardDeck'

export default function Home(props) {

    var updateCardValues = () => {
        var updatedValues = [
            props.dummyData[props.dummyData.length - 1].temperature, 
            props.dummyData[props.dummyData.length - 1].humidity,
            props.dummyData[props.dummyData.length - 1].light,
            props.dummyData[props.dummyData.length - 1].moisture
        ];
        return updatedValues;
    }

    // this data represents the sensor values, they should be initialized empty.. this is just for the simulation when it first renders
    const [sensorCardValues, setSensorCardValues] = useState(updateCardValues);
    const [dataHistory, setDataHistory] = useState(props.dummyData); // for init data

    // runs when the app mounts, similiar to componentDidMount and componentDidUpdate
    // if you give a prop to useEffect, it also runs each time this prop changes..
    useEffect(() => {
        // const data = await fetch('api-address') // fetch data from db here and destructure it
        console.log("data is changing, start rerender..")
        setDataHistory(props.dummyData);
        setSensorCardValues(updateCardValues);
    }, [])

    // render the data
    // make sensorCarddeck responsive
    return (
        <>
            <SensorCardDeck sensorCardValues={sensorCardValues}/>

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