import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
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 ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import FolderIcon from '@mui/icons-material/Folder';
import DeleteIcon from '@mui/icons-material/Delete';
import AddIcon from '@mui/icons-material/Add';
import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';




import ListCreateUpdateDelete from '../../../components/list/ListCreateUpdateDelete'
import ListLabelInputs from '../../../components/list/ListLabelInputs'


import URL from 'constants/url';

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';


function CommitteeCodeMgt(props) {

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

    const [depth01List, setDepth01List] = useState(["중앙건설기술심의", "테스트2"]);
    const [depth02List, setDepth02List] = useState(["123", "테스트2"]);
    const [depth03List, setDepth03List] = useState(["다람쥐", "쳇바퀴"]);
    const [depth04List, setDepth04List] = useState(["임시 텍스트", "text"]);
    const [summaryArray, setSummaryArray] = useState({});

    const [depth01SelectedIndex, setDepth01SelectedIndex] = React.useState();
    const [depth02SelectedIndex, setDepth02SelectedIndex] = React.useState();
    const [depth03SelectedIndex, setDepth03SelectedIndex] = React.useState();
    const [depth04SelectedIndex, setDepth04SelectedIndex] = React.useState();

    useEffect(function () {
        setSummaryArray(
            {
                "중앙건설기술심의" : depth01List[depth01SelectedIndex], 
                "총괄위원회" : depth02List[depth02SelectedIndex], 
                "건설기준위원회" : depth03List[depth03SelectedIndex], 
                "실무위원회" : depth04List[depth04SelectedIndex], 
            }
        );
        console.log(`${depth01List[depth01SelectedIndex]}[${depth01SelectedIndex}]`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [
        depth01List, 
        depth02List,
        depth03List, 
        depth04List, 
        depth01SelectedIndex, 
        depth02SelectedIndex, 
        depth03SelectedIndex, 
        depth04SelectedIndex]);

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

    const Location = React.memo(function Location() {
        return (
            <div className="location">
                <ul>
                    <li><Link to={URL.MAIN} className="home">Home</Link></li>
                    <li><Link to={URL.ADMIN}>사이트 관리</Link></li>
                    <li>환경 설정</li>
                    <li>위원회 코드 관리</li>
                </ul>
            </div>
        )
    });

    return (
        <div className="container">
             <div className="c_wrap">
                {/* <!-- Location --> */}
                <Location />
                {/* <!--// Location --> */}

                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav></EgovLeftNav>
                    {/* <!--// Navigation --> */}

                    <div className="contents " id="contents">
                        {/* <!-- 본문 --> */}
                        <div className="top_tit">
                            <h1 className="tit_1">위원회 코드 관리</h1>
                        </div>

                        <Box
                            sx={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                justifyContent: 'space-between',
                                '& > :not(style)': {
                                mt: 4,
                                width: 245,
                                },
                            }}
                        >
                            <ListCreateUpdateDelete title="중앙건설기술심의" items={depth01List} setItemIndex={setDepth01SelectedIndex}/>
                            <ListCreateUpdateDelete title="총괄위원회" items={depth02List} setItemIndex={setDepth02SelectedIndex}/>
                            <ListCreateUpdateDelete title="건설기준위원회" items={depth03List} setItemIndex={setDepth03SelectedIndex}/>
                            <ListCreateUpdateDelete title="실무위원회" items={depth04List} setItemIndex={setDepth04SelectedIndex}/>
                        </Box>
                        <Box
                            sx={{
                                display: 'flex',
                                flexWrap: 'wrap',
                                '& > :not(style)': {
                                    mt: 4,
                                    width: 245,
                                },
                            }}
                        >
                            <ListLabelInputs title="위원회 코드정보" items={summaryArray} />
                        </Box>
                        
                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default CommitteeCodeMgt;