import React, { useState, useEffect, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import SbItem from './SbItem'
import {SbContainer} from './Sb.style'
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import * as EgovNet from 'api/egovFetch';

function CodeViewer(props) {

    const [{docCode}, setDocCode] = useState(useParams());
    const [codeTree, setCodeTree] = useState();
    const [docSummary, setDocSummary] = useState();
    const [docDetail, setDocDetail] = useState();

    console.group("viewer");
    console.log("[Start] viewer ------------------------------");
    console.log("viewer [props] : ", props);
    const location = useLocation();
    console.log("viewer [location] : ", location);
    console.log("viewer [docCode] : ", docCode);


    const retrieveList = useCallback(() => {
        console.groupCollapsed("EgovMain.retrieveList()");
        const retrieveListURL = '/standardCode/viewer.do';
        const requestOptions = {
            method: "POST",
            headers: {
                'Content-type': 'application/json'
            },
            body: JSON.stringify({
                docCode: docCode
            })
        }

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                const menuData = resp.result.codeTree;
                // 코드 목록 트리 구성
                // https://garve32.tistory.com/52 참고
                const nest = (menuData, parent_seq = null, link = 'parent_seq') =>
                    menuData.filter(item => item[link] === parent_seq)
                        .map(item => ({ ...item, childrens: nest(menuData, item.seq) }));
                const tree = nest(menuData);
                let treeTag = [];
                if(tree.length>0){
                    treeTag.push(
                        <SbContainer>
                            {tree.map((subItem, index) =>
                                <SbItem item={subItem} key={index} />
                            )}
                        </SbContainer>
                    )
                }else{
                    treeTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                }
                setCodeTree(treeTag);

                // 목차 구성
                let summaryTag = [];
                // 문서 전문 구성
                let detailTag = [];
                if(resp.result.document.length>0){
                    resp.result.document.forEach(function (item, index){
                        summaryTag.push(
                            <div>{item.group_title}</div>
                        )
                        detailTag.push(
                            <div dangerouslySetInnerHTML={ {__html: item.full_content} }></div>
                        )
                    })
                }else{
                    summaryTag.push(<li key="0">검색된 결과가 없습니다.</li>);
                }
                setDocSummary(summaryTag);
                setDocDetail(detailTag);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovMain.retrieveList()");
    },[]);


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

    console.log("------------------------------viewer [End]");
    console.groupEnd("viewer");
    return (
        <Row>
            <Col xs={3} className="border-end">
                {codeTree}
            </Col>
            <Col xs={3} className="border-end">
                {docSummary}
            </Col>
            <Col xs={6}>
                {docDetail}
            </Col>
        </Row>
    );
}


export default CodeViewer;