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

import {Box, Button, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Switch, TextField} from "@mui/material";
import React from "react";
import {DateTimePicker} from "@mui/x-date-pickers";

export const Types = {
    BOOLEAN: "boolean",
    DATE: "date",
    STRING: "string",
    BUTTON: "button",
    SELECT: "select"
}

function FilterComponent(props) {
    const getBooleanEntry = (entry) => {
        return (<>
            <Switch onChange={(e) => entry.fce(e.target.checked)} defaultChecked={entry.defValue}></Switch>
            {entry.name}
        </>);
    }

    const getDateEntry = (entry) => {
        return (<>
            <DateTimePicker slotProps={{ textField: { size: "small", label: entry.name }, }}
                            onChange={(value) => entry.fce(value)}
            />
        </>);
    }

    const getStringEntry = (entry) => {
        return (<>
            <TextField fullWidth label={entry.name} size={"small"}
                       defaultValue={entry.defValue}
                       sx={{paddingLeft: 1, paddingRight: 1}}
                       onChange={(e) => entry.fce(e.target.value)}
            />
        </>);
    }

    const getButtonEntry = (entry) => {
        return (<Box sx={{paddingLeft: 1, paddingRight: 1}}>
                    <Button fullWidth  variant={"contained"} onClick={entry.fce}> {entry.name} </Button>
                </Box>);
    }

    const getSelectEntry = (entry) => {
        return (
            <FormControl fullWidth size="small" sx={{paddingLeft: 1, paddingRight: 1}}>
                <InputLabel id={"filter-select-" + entry.name} sx={{paddingLeft: 1, paddingRight: 1}}>{entry.name}</InputLabel>
                <Select
                    labelId={"filter-select-" + entry.name}
                    id={"filter-select-" + entry.name}
                    label={entry.name}
                    defaultValue={entry.defValue}
                    onChange={(e) => entry.fce(e.target.value)}
                >
                    {entry.items?.map((item) =>
                        <MenuItem value={item.val} key={item.name}>{item.name}</MenuItem>
                    )}
                </Select>
            </FormControl>
        );
    }

    const getFilterEntry = (entry) => {
        let res;
        switch(entry.type) {
            case Types.BOOLEAN:
                res = getBooleanEntry(entry);
                break;
            case Types.DATE:
                res = getDateEntry(entry);
                break;
            case Types.STRING:
                res = getStringEntry(entry);
                break;
            case Types.BUTTON:
                res = getButtonEntry(entry);
                break;
            default:    //SELECT
                res = getSelectEntry(entry);
                break;
        }
        return (<Grid item xs={1} key={"GK_"+entry.id}>{res}</Grid>);
    }

    return (<Paper elevation={2} sx={{padding: 1, marginBottom: 1, marginTop: 1}}>
        <Grid container columns={{xs: 2, md: 4, lg: 5, xl: 6}} spacing={1}>
            {Array.from(props.entries).map((entry, _) => {
                return getFilterEntry(entry);
            })}
        </Grid>
    </Paper>);
}

export default FilterComponent;
