import * as React from 'react';
import Box from '@mui/material/Box';
import Drawer from '@mui/material/Drawer';
import Button from '@mui/material/Button';
import {SxProps, Theme} from "@mui/material";

interface Props {
    outerContainerSx?: SxProps<Theme>;
    children?: React.ReactNode;
}

export default function DrawerNewField({outerContainerSx: sx, children }: Props) {
    const [state, setState] = React.useState({
        right: false,
    });

    const toggleDrawer =
        (anchor: 'right', open: boolean) =>
            () => {
                setState({ ...state, 'right' : open });
            };

    return (
        <>
            <Button onClick={toggleDrawer("right", true)} variant='contained' sx={{maxWidth: 'fit-content', padding: '10px 20px'}}>
                Добавить поле +
            </Button>
            <Drawer
                anchor='right'
                open={state['right']}
                onClose={toggleDrawer("right", false)}
            >
                <Box
                    sx={{ width: 450 }}
                    role="presentation"
                >

                    {children}
                </Box>
            </Drawer>
        </>
    );
}