import React from 'react';
import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';
import { CardActionArea } from '@mui/material';
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';
import TextField from '@mui/material/TextField';

import FormDialog from '../../components/alert/FormDialog';

import styledComponent from "styled-components";

const StyledDiv = styledComponent.div`
    .text-item.active {
        background-color: #676767;
    }
`;

function generate(items, element, onClickListner,nameKey,
    idKey) {
    return items.map((value, index) => 
        React.cloneElement(element, {
            key: value[nameKey],
        },
        <Card  className="text-item" sx={{ '&': { boxShadow: 'none' } }} data-index={index} onClick={(e) => {onClickListner(e, index);}}>
            <CardActionArea sx={{ px: 1 }}>
                <ListItemText
                    primary={value[nameKey]}
                    key={index}                    
                />
            </CardActionArea>
      </Card>),
    );
}

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);

    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
    };

    const onClickItem = (e, index) => {

        // 기존 active를 모두 해제 한다.
        let siblingEle = e.currentTarget.parentNode.parentNode.firstChild;
        do {
            siblingEle.firstChild.classList.remove('active');
        } while (siblingEle = siblingEle.nextSibling);

        // 선택된 것만 active로 지정한다.
        if( Number(e.currentTarget.getAttribute('data-index')) === index ) {
            e.currentTarget.classList.add('active');
        }
        props.setItemIndex(index);
    };
    return (
        <StyledDiv>
            <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'}} onClick={handleClickOpen}>                               
                                <AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
                            </IconButton>
                        </Item>
                    </Grid>                                    
                </Grid>
                </Typography>
                <Demo>
                    <List dense={dense} sx={{ px: 0, '&': { height: '253px', overflowY: 'auto'}}}>
                    {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>,
                        onClickItem,
                        props.nameKey,
                        props.idKey
                    )}
                    </List>
                </Demo>
                <FormDialog open={open} setOpen={setOpen} title="위원회 코드 등록" contentText="위원회 코드 항목을 입력해주세요." >
                    <TextField
                        autoFocus
                        required
                        margin="dense"
                        id="insert-org-nm"
                        name="insert-org-nm"
                        label="명칭"
                        type="text"
                        fullWidth
                        variant="standard"
                    />
                    <TextField
                        required
                        margin="dense"
                        id="insert-org-desc"
                        name="insert-org-desc"
                        label="위원회 설명"
                        type="text"
                        fullWidth
                        variant="standard"
                    />
                </FormDialog>
            </Paper>
        </StyledDiv>
        
    );
}

export default ListCreateUpdateDelete;