import React, { useState, useEffect } from 'react';
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';


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 ListLabelInputs(props) {

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

    const [items, setItems] = useState(false);

    useEffect(function () {
        setItems(props.items);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [props]);

    useEffect(function () {
        // eslint-disable-next-line react-hooks/exhaustive-deps
     
    }, [items]);

    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={10} >
                    <Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
                </Grid>
            </Grid>
            </Typography>
            <Demo>
                <List dense={dense}>
                    {
                        items &&
                        Object.entries(items).map(([key, value], index) => (
                            <ListItem key={index} >
                                <TextField sx={{ '&': { width: '100%' }}} id="standard-basic" label={key} variant="standard" value={value ? value : ""} inputProps={{ readOnly: true, }} />
                            </ListItem>
                        ))
                    }
                </List>
            </Demo>
        </Paper>
    );
}

export default ListLabelInputs;