/**
 * @file DeviceChart.js
 * @author Radim Buráň (xburan03@stud.fit.vutbr.cz)
 */

import {useEffect, useState} from "react";
import ChartComponent from "./ChartComponent";
import {axiosGet} from "../../services/AxiosService";

function DeviceChart(props) {
    const dev = props.device;
    const range = props.range || "-1h";
    const display = props.chartData.display;
    const measurement = props.chartData.measurement;
    const color = props.chartData.color;
    const [timeSeries, setTimeSeries] = useState([]);

    useEffect(() => {
        if (dev === null || dev === undefined) {
            return;
        }
        axiosGet("/records", {
            device: dev?.id,
            measurement: measurement,
            range: range
        }).then((res) => {
            setTimeSeries(res.data);
            console.log("Dev: " + dev?.name + " > " + res.data.data);
        }).catch((e)=>{
            console.log("ERROR: " + e);
        });
    }, [dev, range, measurement]);

    return (<>
        <ChartComponent title={display}
                         data={[timeSeries]}
                         lineColor={[color]}
                         label={[display]}
                         isPercent={measurement !== "air_temp"}
        />
    </>);
}

export default DeviceChart