import * as React from 'react';
import Box from '@mui/material/Box';
import { styled, ThemeProvider, createTheme } from '@mui/material/styles';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import Paper from '@mui/material/Paper';

import ListSubheader from '@mui/material/ListSubheader';

import ReferenceCodePopupDialogCotentsHeader    from './ReferenceCodePopupDialogCotentsHeader';
import ReferenceCodePopupDialogCotentsListItem  from './ReferenceCodePopupDialogCotentsListItem';




const data = [
  {
    codeTitle: "KDS 10 00 00",
    codeName: '설계기준',
    depth: 1,
    children: [
      {
        codeTitle: "KDS 10 10 00",
        codeName: '공통편',
        depth: 2,
        children: [
          {
            codeTitle: "KDS 10 10 00",
            codeName: '공통편',
            depth: 3,
            children: [
              {
                codeTitle: "KDS 10 00 00",
                codeName: '공통 설계기준',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "KDS 10 20 00",
                codeName: '지반 설계 기준',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "KDS 12 00 00",
                codeName: '건설측량 설계기준',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "KDS 14 00 00",
                codeName: '구조 설계기준',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "KDS 17 00 00",
                codeName: '내진 설계기준',
                depth: 4,
                children: [
                ]
              },
            ]
          },
          {
            codeTitle: "KDS 10 20 00",
            codeName: '시설물편',
            depth: 3,
            children: [
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
              {
                codeTitle: "TEST 17 00 00",
                codeName: 'test',
                depth: 4,
                children: [
                ]
              },
            ]
          },
        ]
      },
      {
        codeTitle: "KDS 10 20 00",
        codeName: '시설물편',
        depth: 2,
        children: [
        ]
      },
    ]
  },
  { codeTitle: "KCS 20 00 00",     codeName: '표준시방서', depth: 1, },
  { codeTitle: "SMCS 40 00 00",     codeName: '서울시 전문시방서', depth: 1, },
  { codeTitle: "EXCS 50 00 00",     codeName: '고속도로공사 전문시방서', depth: 1, },
  { codeTitle: "KRCCS 60 00 00",     codeName: '농업생산기반시설 전문시방서', depth: 1, },
];


const FireNav = styled(List)({
  '& .MuiListItemButton-root': {
    paddingLeft: 0,
    paddingRight: 0,
  },
  '& .MuiListItemIcon-root': {
    minWidth: 0,
    marginRight: 16,
  },
  '& .MuiSvgIcon-root': {
    fontSize: 20,
  },
});


export default function ReferenceCodePopupDialogCotents() {

  const [selectedValue, setSelectedValue] = React.useState('a');

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


  return (
    <Box sx={{ display: 'flex' }}>
      <ThemeProvider
        theme={createTheme({
          components: {
            MuiListItemButton: {
              defaultProps: {
                disableTouchRipple: true,
              },
            },
          },
          palette: {
            mode: 'dark',
            primary: { main: 'rgb(102, 157, 246)' },
            background: { paper: 'rgb(5, 30, 52)' },
          },
        })}
      >
        <Paper elevation={0} sx={{ maxWidth: 520 }}>
          <FireNav 
            sx={{ my: 0,  }}
            component="nav" disablePadding>
            <ListItemButton component="a" href="#customized-list">
              <ListItemText
                sx={{ my: 0 }}
                primary="문서번호 또는 코드명을 선택 하시면 하위 문서를 검색 하실 수 있습니다"
                primaryTypographyProps={{
                  backgroundColor: '#ffffff',
                  color: '#333333',
                  border: '1px solid #333333',
                  fontSize: 15,
                  fontWeight: 'medium',
                  letterSpacing: 0,
                  padding: '10px',
                  borderRadius: '6px',
                }}
              />
            </ListItemButton>
            
            <List
              sx={{ width: '100%' }}
              component="nav"
              aria-labelledby="nested-list-subheader"
              subheader={
                <ListSubheader 
                sx={{
                  background: '#ffffff',
                  color: '#222222',
                  border: '4px double #333333',
                  borderLeftWidth: '0px',
                  borderRightWidth: '0px',                  
                  borderBottomWidth: '1px',            
                }}
                component="div" id="nested-list-subheader">
                  <ReferenceCodePopupDialogCotentsHeader />
                </ListSubheader>
              }
            >
              <ReferenceCodePopupDialogCotentsListItem 
              data={data}
            />
            </List>
            
            
          </FireNav>
        </Paper>
      </ThemeProvider>
    </Box>
  );
}
