import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import * as React from "react";
import {useState} from "react";
import Typography from "@mui/material/Typography";
import DialogContent from "@mui/material/DialogContent";
import DialogActions from "@mui/material/DialogActions";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";

export function BarCreateModal({open, setOpen, create, id}) {
    const [value, setValue] = useState("");
    return (
        <Dialog fullWidth={true}
                open={open} onClose={() => setOpen(false)}
                sx={{
                    '& .MuiDialog-paper': {
                        margin: '8px',
                    },
                    '& .MuiPaper-root': {
                        width: 'calc(100% - 16px)',
                    }
                }}>
            <DialogTitle>
                <Typography>Создать список</Typography>
            </DialogTitle>
            <DialogContent>
                <TextField sx={{width: '75%'}}
                           label={<Typography pt={'4px'}>
                               Название списка</Typography>} variant='outlined'
                           value={!value ? "" : value}
                           onChange={(e) => setValue(e.target.value)}
                />
            </DialogContent>
            <DialogActions>
                <Button onClick={() => {
                    create(id, value);
                    setValue("");
                }}>Создать</Button>
            </DialogActions>
        </Dialog>
    )
}