import React, {useCallback, useEffect, useState} from 'react';
import {Link} from "react-router-dom";
import URL from "constants/url";

import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
import * as EgovNet from "../../../api/egovFetch";
import Modal from "react-bootstrap/Modal";
import MenuModal from "./menuMgt/MenuModal";


function MenuMgt({}) {

    const [listTag, setListTag] = useState([]);

    const [show, setShow] = useState(false);
    const [modalBody, setModalBody] = useState();

    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);

    const retrieveList = useCallback(() => {
        EgovNet.requestFetch(
            '/admin/config/menu-mgt',
            {
                method: "GET"
            },
            (resp) => {
                let mutListTag = [];

                setListTag([]);
                // 리스트 항목 구성
                resp.result.menuList.forEach(function (item, index) {
                    mutListTag.push(
                        <div className={"list_item"} key={"userListDiv_"+index}>
                            <div>{item.menuId}</div>
                            <div>{item.menuTitle}</div>
                            <div>{item.menuGroup}</div>
                            <div>{item.menuLevel}</div>
                            <div>{item.menuSort}</div>
                            <div>{item.menuUrl}</div>
                            <div>{item.menuTypeCd}</div>
                            <div>
                                <button className={"btn btn_blue_h31 px-1"} onClick={()=>{editMenu(item)}}>수정</button>
                            </div>
                        </div>
                    );
                });
                if(!mutListTag.length) mutListTag.push(<p className="no_data" key="0">검색된 결과가 없습니다.</p>); // 게시판 목록 초기값
                setListTag(mutListTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    },[]);

    function editMenu(menu){
        handleShow();
        setModalBody(<MenuModal savedInfo={menu}/>)
    }

    useEffect(()=>{
        retrieveList();
    }, [])

    return (
        <div className="container">
            <div className="c_wrap">
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
                        <li>사이트관리</li>
                        <li>환경설정</li>
                        <li><Link to={URL.ADMIN__USERS__LIST}>메뉴 관리</Link></li>
                    </ul>
                </div>
                <div className="layout">
                    {/* <!-- Navigation --> */}
                    <EgovLeftNav/>
                    <div className="contents NOTICE_LIST" id="contents">
                        {/* <!-- 본문 --> */}

                        <div className="top_tit">
                            <h1 className="tit_1">메뉴 관리</h1>
                        </div>
                        <h2 className="tit_2"></h2>

                        <div className="board_list menuList">
                            <div className="head">
                                <span>아이디</span>
                                <span>이름</span>
                                <span>그룹</span>
                                <span>레벨</span>
                                <span>정렬</span>
                                <span>URI</span>
                                <span>타입</span>
                                <span>
                                    <button className={"btn btn_blue_h31 px-1"} onClick={()=>{editMenu(undefined)}}>추가</button>
                                </span>
                            </div>
                            <div className="result">
                                {listTag}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <Modal show={show} onHide={handleClose} keyboard={false}>
                {modalBody}
            </Modal>
        </div>
    );
}

export default MenuMgt;