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

import {axiosGet} from "../../services/AxiosService";
import React, {useEffect, useState} from "react";
import {useParams} from "react-router-dom";
import Preset from "../../components/presets/Preset";
import {Grid} from "@mui/material";
import DeviceCharts from "../../components/charts/DeviceCharts";
import DeviceDetail from "../../components/devices/DeviceDetail";

function DevicesPage() {
    const {id} = useParams()
    const [device, setDevice] = useState(null);

    useEffect(() => {
        axiosGet("/devices/" + id, {presets: true}).then((res) => {
            setDevice(res.data);
        }).catch((e) => {
            console.error(e);
        });
    }, [id]);


    return (<Grid container columns={{xs: 1, md: 2}} spacing={1}>
        <Grid item xs={1}>
            <DeviceDetail device={device}/>
        </Grid>

        <Grid item xs={1}>
            <Preset preset={device?.preset?.data} editingEnabled={true}/>
        </Grid>

        <Grid item xs={12}>
            <DeviceCharts device={device}/>
        </Grid>

    </Grid>);
}


export default DevicesPage