import Dialog from "@mui/material/Dialog";
import DialogTitle from "@mui/material/DialogTitle";
import * as React 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 {useState} from "react";
import TextField from "@mui/material/TextField";

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