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

import OpacityIcon from "@mui/icons-material/Opacity";
import ThermostatIcon from '@mui/icons-material/Thermostat';
import WavesIcon from '@mui/icons-material/Waves';
import LocalDrinkIcon from '@mui/icons-material/LocalDrink';
import {Grid, Tooltip, Typography} from "@mui/material";
import React, {useEffect, useState} from "react";
import {axiosGet} from "../../services/AxiosService";


function DeviceLastData(props) {
    const dev = props.dev;
    const [lastData, setLastData] = useState({});
    const isCompact = props.compact || false;

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

    const ITEMS = [
        {key: "soil_hum", name: "Vlhkost půdy", unit: "%", icon: <LocalDrinkIcon fontSize={"inherit"}/>},
        {key: "water_level", name: "Úroveň vody", unit: "%", icon: <OpacityIcon fontSize={"inherit"}/>},
        {key: "air_temp", name: "Teplota vzduchu", unit: "°C", icon: <ThermostatIcon fontSize={"inherit"}/>},
        {key: "air_hum", name: "Vlhkost vzduchu", unit: "%", icon: <WavesIcon fontSize={"inherit"}/>},
    ];

    const parseDate = (str) => {
        if (str === null || str === undefined) {
            return "... ";
        }

        return new Date(str).toLocaleString([], {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        })
    }

    return (<Grid container columns={{xs: 2}} spacing={0.5} sx={props.sx}>
        <Grid item xs={2} key={"time"}>
            <Typography display={"inline"}>{"Poslední aktualizace: " + parseDate(lastData["last_update"])}</Typography>
        </Grid>

        {ITEMS.map((entry) => (
            <Grid item xs={1} key={entry.key}>
                <Tooltip title={entry.name} followCursor>
                    <Grid container columns={{xs: 2}}>
                        <Grid item xs={1}>
                             {entry.icon}
                             {!isCompact && <Typography display={"inline"}>{entry.name}</Typography> }
                         </Grid>

                        <Grid item xs={1}>
                            {lastData[entry.key] !== undefined ?
                                 <Typography display={"inline"}>{lastData[entry.key]?.toFixed(0)}</Typography>
                                 :
                                 <Typography display={"inline"}>{"... "}</Typography>
                             }
                             <Typography display={"inline"}>{entry.unit}</Typography>
                         </Grid>
                    </Grid>
                </Tooltip>
            </Grid>
        ))}
    </Grid>);
}

export default DeviceLastData;