import React, { useState, useEffect, useCallback } from 'react';
import { Link, useLocation } from 'react-router-dom';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Button from 'react-bootstrap/Button';
import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';

function EgovMain(props) {
    console.group("EgovMain");
    console.log("[Start] EgovMain ------------------------------");
    console.log("EgovMain [props] : ", props);

    const location = useLocation();
    console.log("EgovMain [location] : ", location);

	// eslint-disable-next-line no-unused-vars
    const [noticeBoard, setNoticeBoard] = useState();
	// eslint-disable-next-line no-unused-vars
    const [gallaryBoard, setGallaryBoard] = useState();
    const [noticeListTag, setNoticeListTag] = useState();
    const [gallaryListTag, setGallaryListTag] = useState();

    const retrieveList = useCallback(() => {
        console.groupCollapsed("EgovMain.retrieveList()");

        const retrieveListURL = '/cmm/main/mainPageAPI.do';
        const requestOptions = {
            method: "POST",
            headers: {
                'Content-type': 'application/json'
            },
            body: JSON.stringify()
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {

                setNoticeBoard(resp.result.notiList);
                setGallaryBoard(resp.result.galList);

                let mutNotiListTag = [];
                mutNotiListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값

                // 리스트 항목 구성
                resp.result.notiList.forEach(function (item, index) {
                    if (index === 0) mutNotiListTag = []; // 목록 초기화
                    mutNotiListTag.push(
                        <li key={item.nttId}>
                            <Link
                                to={{pathname: URL.INFORM_NOTICE_DETAIL}}
                                state={{
                                    nttId: item.nttId,
                                    bbsId: item.bbsId
                                }}
                            >
                                {item.nttSj}
                                <span>{item.frstRegisterPnttm}</span>
                            </Link>
                        </li>
                    );
                });
                setNoticeListTag(mutNotiListTag);

                let mutGallaryListTag = [];
                mutGallaryListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값

                // 리스트 항목 구성
                resp.result.galList.forEach(function (item, index) {
                    if (index === 0) mutGallaryListTag = []; // 목록 초기화
                    mutGallaryListTag.push(
                        <li key={index}>
                            <Link
                                to={{pathname: URL.INFORM_GALLERY_DETAIL}}
                                state={{
                                    nttId: item.nttId,
                                    bbsId: item.bbsId
                                }}
                            >
                                {item.nttSj}
                                <span>{item.frstRegisterPnttm}</span>
                            </Link>
                        </li>
                    );
                });
                setGallaryListTag(mutGallaryListTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovMain.retrieveList()");
    },[]);

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

    console.log("------------------------------EgovMain [End]");
    console.groupEnd("EgovMain");

    return (
        <div className="P_MAIN">{/* container */}
            <div className="c_wrap">
                <div className="topbox d-flex justify-content-center align-items-center">
                    <div className="topbox_1"></div>
                    <div className="topbox_2"></div>
                    <div className="topbox_3"></div>
                </div>
                <div className="menubox d-flex justify-content-center align-items-center">
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_OLD}><div className="menu_img"><img src="/assets/images/ico-landing5.png" /></div><div className="menu_text">훈령/예규/지침</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_ENG}><div className="menu_img"><img src="/assets/images/ico-landing6.png" /></div><div className="menu_text">영문건설기준</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_TERM}><div className="menu_img"><img src="/assets/images/ico-landing8.png" /></div><div className="menu_text">건설기준용어</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST}><div className="menu_img"><img src="/assets/images/ico-landing7.png" /></div><div className="menu_text">주요행사</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST}><div className="menu_img"><img src="/assets/images/ico-landing9.png" /></div><div className="menu_text">수요조사</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_API}><div className="menu_img"><img src="/assets/images/ico-landing10.png" /></div><div className="menu_text">API 서비스</div></Link></div>
                    <div className="menubox_n text-center"><Link to={URL.SUPPORT_SITE}><div className="menu_img"><img src="/assets/images/ico-landing11.png" /></div><div className="menu_text">관련사이트</div></Link></div>
                </div>
                <div className="qnabox">

                </div>
                <div className="numbox">

                </div>
                <div className="bbsbox">

                </div>
                <div className="bannerbox">

                </div>
            </div>
        </div>

    );
}

export default EgovMain;