import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import Divider from '@mui/material/Divider';

import ListItemIcon from '@mui/material/ListItemIcon';
import AddIcon from '@mui/icons-material/Add';
import RemoveIcon from '@mui/icons-material/Remove';


import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';



import { styled } from '@mui/material/styles';


const Item = styled('div')(({ theme }) => ({
  padding: '0px',
  borderRadius: '4px',  
  textAlign: 'left',
}));



const ItemComponent = (props) => {
  const {item, index, openSelf} = props;

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

  const handleClick = () => {
    setOpen(!open);
  };

  return (    
    <Collapse in={openSelf} timeout="auto" unmountOnExit sx={{width: '100%'}}>
      <ListItem disablePadding sx={{ width: '100%'}}>
        <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
          <ListItem disablePadding sx={{ width: '100%'}}>
            <ListItemButton onClick={handleClick} sx={{width: '100%'}}>
                <Box
                  sx={{                    
                    display: 'grid',
                    gridAutoFlow: 'row',
                    gridTemplateColumns: 'auto 120px 90px',                
                    gap: 1,
                    width: '100%'
                  }}
                >
                  <Item
                    sx={{paddingLeft: `${Number(Number(item.depth)-1) * 20}px`,}}
                  >
                    {
                      item.children && item.children.length > 0
                    ?
                      <span>
                        {
                          open
                        ?
                          <RemoveIcon sx={{ color: '#777777', height: '30px;'}} />
                        :
                          <AddIcon sx={{ color: '#777777', height: '30px;'}} />
                        }
                      </span>
                    :
                      <span> &nbsp; &nbsp; </span>
                    }
                    &nbsp;{item.codeTitle}
                  </Item>
                  <Item>{item.codeName}</Item>
                  <Item sx={{textAlign: 'center'}}>
                    <button type="button" class="btn btn_blue_h31 px-1">선택</button>
                  </Item>
                </Box>
            </ListItemButton>
          </ListItem>
          {
            item.children &&
            item.children.map(function(item, index) {
              //<div>item.codeTitle</div>
              console.log('thkim 2024-03-21 11:29 %o', item);
              return (
                <ItemComponent item={item} index={index} openSelf={open} />
              );
            })
          }
        </List>
      </ListItem>
    </Collapse>    
  );  
};


export default function ReferenceCodePopupDialogCotentsListItem(props) {
  const {data} = props;
  const [selectedValue, setSelectedValue] = React.useState('a');

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };


  return (
    <List sx={{ paddingTop: '0px', paddingBottom: '0px', width: '100%'}}>
      {
        data &&
        data.map(function(item, index) {
          return (
            <ItemComponent item={item} index={index} openSelf={true} />
          );
        })
      }
    </List>
  );
}