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 Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';



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


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


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

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

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

  return (
    <ListItem disablePadding sx={{ width: '100%'}}>
      <List sx={{width: '100%'}}>
        <ListItem disablePadding sx={{ width: '100%'}}>
          <ListItemButton onClick={handleClick} sx={{width: '100%'}}>
              <Box
                sx={{
                  display: 'grid',
                  gridAutoFlow: 'row',
                  gridTemplateColumns: 'repeat(3, 1fr)',                
                  gap: 1,
                  width: '100%'
                }}
              >
                <Item>{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} />
            );
          })
        }
      </List>
    </ListItem>
  );  
};

const ItemComponentChild = (props) => {
  const {open, item} = props;

  return (
    <Collapse in={open} timeout="auto" unmountOnExit sx={{width: '100%'}}>
        <List component="div" disablePadding sx={{width: '100%'}}>
          <ListItemButton sx={{ pl: 4, width: '100%' }}>
          <Box
            sx={{
              display: 'grid',
              gridAutoFlow: 'row',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 1,
              width: '100%'
            }}
          >
            <Item>{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>
        </List>
      </Collapse>
  );  
};


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

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


 

  //data

  return (
    <List sx={{width: '100%'}}>
      {
        data &&
        data.map(function(item, index) {
          //<div>item.codeTitle</div>
          console.log('thkim 2024-03-21 11:29 %o', item);
          return (
            <ItemComponent item={item} index={index} />
          );
        })
      }
    </List>
  );
}