import React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import EditIcon from '@mui/icons-material/Edit';
import ListItemText from '@mui/material/ListItemText';
import IconButton from '@mui/material/IconButton';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';


function generate(items, element) {
    return items.map((value) => 
        React.cloneElement(element, {
            key: value,
        }, <ListItemText
        primary={value}
    />),
    );
}

const Demo = styled('div')(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }));

const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
    ...theme.typography.body2,
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
}));

function ListCreateUpdateDelete(props) {

    const [dense, setDense] = React.useState(false);

    return (
        <Paper>
            <Typography sx={{ p: 0 }} variant="h6" component="div">
            <Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
                <Grid item xs={6} md={8} >
                    <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
                </Grid>
                <Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
                    <Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
                        <IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}}>                               
                            <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
                        </IconButton>
                    </Item>
                </Grid>                                    
            </Grid>
            </Typography>
            <Demo>
                <List dense={dense}>
                {generate(
                    props.items,                    
                    <ListItem
                    secondaryAction={
                        <div>                                                
                            <IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">                                                
                                <EditIcon />
                            </IconButton>
                            <IconButton edge="end" aria-label="delete">                                                
                                <DeleteIcon />   
                            </IconButton>
                        </div>
                    }
                    >                    
                    </ListItem>,
                )}
                </List>
            </Demo>
        </Paper>
    );
}

export default ListCreateUpdateDelete;