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

import React from "react";
import {Box, Button, Collapse, FormControl, Grid, InputLabel, MenuItem, Paper, Select} from "@mui/material";
import DeviceChart from "./DeviceChart";
import DeviceLightChart from "./DeviceLightChart";
import DevicePPFDChart from "./DevicePPFDChart";

function DeviceCharts(props) {
    const [isOpened, setOpened] = React.useState(true);
    const [chartRange, setChartRange] = React.useState("-1d");
    const dev = props.device;

    const charts = [
        {display: "Vlhkost vzduchu", measurement: 'air_hum', color: "rgb(100,255,237)"},
        {display: "Teplota vzduchu", measurement: 'air_temp', color: "rgb(100,255,167)"},
        {display: "Vlhkost půdy", measurement: 'soil_hum', color: "rgb(167,81,23)"},
        {display: "Množství vody", measurement: 'water_level', color: "rgb(100,172,255)"},
        {display: "Světelná data", measurement: 'light', light: true},
        {display: "PPFD", measurement: 'light', ppfd: true, color: "rgb(133,168,0)"},
    ];

    return (<>
        <Paper elevation={2} sx={{padding: 1, marginBottom: 1, marginTop: 1}}>
            <Grid container columns={{xs: 2, md: 4, xl: 8}} spacing={1}>

                <Grid item xs={1} key={"button_hide"}>
                    <Button variant={"contained"} onClick={() => setOpened(!isOpened)}>
                        {isOpened ? "Skrýt" : "Zobrazit"}
                    </Button>
                </Grid>

                <Grid item xs={1} key={"range_selector"}>
                    <FormControl sx={{ minWidth: 120 }} size="small">
                    <InputLabel id="time-select">Rozsah</InputLabel>
                    <Select
                        labelId="time-select"
                        id="time-select"
                        value={chartRange}
                        label="Rozsah"
                        defaultValue={"-1d"}
                        onChange={(e) => setChartRange(e.target.value)}
                    >
                        <MenuItem value={"-1h"}>1 hodina</MenuItem>
                        <MenuItem value={"-6h"}>6 hodin</MenuItem>
                        <MenuItem value={"-1d"}>1 den</MenuItem>
                        <MenuItem value={"-7d"}>7 dní</MenuItem>
                        <MenuItem value={"-14d"}>14 dní</MenuItem>
                        <MenuItem value={"-30d"}>30 dní</MenuItem>
                        <MenuItem value={"-90d"}>3 měsíce</MenuItem>
                    </Select>
                    </FormControl>
                </Grid>
            </Grid>
        </Paper>

        <Collapse in={isOpened}>
            <Box sx={{padding: 1, marginBottom: 1, marginTop: 1}}>

                <Grid container columns={{xs: 1, md: 2, xl: 3}} spacing={2}>
                    {charts.map((chart) => (
                        <Grid item xs={1} key={chart.display} sx={{height: 300}}>
                            {chart?.light ?
                                <DeviceLightChart device={dev} chartData={chart} range={chartRange}/>
                                :
                                (chart?.ppfd ?
                                    <DevicePPFDChart device={dev} chartData={chart} range={chartRange}/>
                                    :
                                    <DeviceChart device={dev} chartData={chart} range={chartRange}/>
                                )
                            }
                        </Grid>
                    ))}
                </Grid>

            </Box>
        </Collapse>
    </>);
}


export default DeviceCharts