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

function CodeViewer(props) {
    const [treeLoading, setTreeLoading] = useState(true);
    const [docLoading, setDocLoading] = useState(true);
    const {linkedDocCode} = useParams();
    const [docCode, setDocCode] = useState(linkedDocCode !== undefined?linkedDocCode:props.docCode);
    const [docName, setDocName] = useState(props.docName);
    const [codeTree, setCodeTree] = useState();
    const [docSummary, setDocSummary] = useState();
    const [docDetail, setDocDetail] = useState();

    const [show, setShow] = useState(false);
    const [bookMarkModal, setBookMarkModal] = useState();

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

    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 updateDocCode = (docCode, docName)=>{
        setDocCode(docCode);
        setDocName(docName);
        getCodeDetailInfo(docCode);
    }

    const getCodeTree = ()=>{
        EgovNet.requestFetch(
            '/standardCode/getCodeTree.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({})
            },
            (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) =>
                                <SbItem item={subItem} openDocCode={docCode} updateDocCode={updateDocCode} />
                            )}
                        </SbContainer>
                    )
                }else{
                    treeTag.push(<div>검색된 결과가 없습니다.</div>); // 코드 목록 초기값
                }
                setCodeTree(treeTag);
                setTreeLoading(false);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
    }
    const getCodeDetailInfo = useCallback((docCode) => {
        console.groupCollapsed("EgovMain.getCodeDetailInfo()");
        EgovNet.requestFetch(
            '/standardCode/getCodeDetailInfo.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify({
                    docCode: docCode
                })
            },
            (resp) => {
                // 목차 구성
                let summaryTag = [];
                // 문서 전문 구성
                let detailTag = [];

                if(resp.result.document.length>0){
                    const docLinkReg = /([A-Z]{3,5}(\s[0-9]{2}){3,4})/g
                    const docPartReg = /\((?:표|그림|부록)?\s*([A-Z]\.)?(?!\d\))\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\)/g // /(\((?:표|그림|부록)?\s*([A-Z]\.)?\d+(\.\d+)*(\s?\(\d\))?(-\d+)?(?:\s*[A-Z])?\))/g
                    resp.result.document.forEach(function (item, index){
                        const isTitle = item.full_content.includes(item.group_title);
                        if(isTitle){
                            summaryTag.push(
                                <VwDiv depth={item.cont_level} isTitle={isTitle}>
                                    <VwPtag href="#" isTitle={isTitle} onClick={() => {
                                        document.location.hash="#"+item.cont_type_cd;
                                    }}>
                                        {item.group_title}
                                    </VwPtag>
                                </VwDiv>
                            )
                        }
                        if(docLinkReg.test(item.full_content)){
                            const docCodeAry = item.full_content.match(docLinkReg);
                            const docCodeMap = new Map();
                            for(let i=0; i<docCodeAry.length; i++) {
                                const docCode = docCodeAry[i];
                                docCodeMap.set(docCode, '<a class="docLink" href="/standardCode/viewer/' + docCode + '" target="_blank">' + docCode + '</a>')
                            }
                            docCodeMap.forEach((docCodeLink, docCode)=>{
                                item.full_content = item.full_content.replaceAll(docCode, docCodeLink);
                            })
                            if(docPartReg.test(item.full_content)){
                                const docPartAry = item.full_content.match(docPartReg);
                                const docPartMap = new Map();
                                for(let i=0; i<docPartAry.length; i++) {
                                    const docPart = docPartAry[i];
                                    const docCode = item.full_content.substring(item.full_content.indexOf(docPart)-30).match(docLinkReg)[0];
                                    docPartMap.set(docPart, docPart +
                                        '<key class="bookmark" data-doccode="'+docCode+'" data-docpart="'+docPart.replace('(', '').replace(')', '')+'">'+
                                        '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4z"></path><path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1H4.268z"></path></svg>'+
                                        '</key>');
                                }
                                docPartMap.forEach((docPartLink, docPart)=>{
                                    item.full_content = item.full_content.replaceAll(docPart, docPartLink);
                                })
                            }
                        }
                        if(item.full_content.includes("<table")){
                            item.full_content = item.full_content.replace('<table ', '<table class="table table-bordered "')
                        }
                        if(item.error_cd !== null){
                            item.full_content += "<div class='errorText'>"+item.error_cd+"</div>";
                        }
                        detailTag.push(
                            <VwDiv depth={item.cont_level} isTitle={isTitle} id={item.cont_type_cd} dangerouslySetInnerHTML={ {__html: item.full_content} }></VwDiv>
                        )
                    })
                }else{
                    summaryTag.push(<li key="0">검색된 결과가 없습니다.</li>);
                }
                setDocSummary(summaryTag);
                setDocDetail(detailTag);
                setDocLoading(false);
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("EgovMain.getCodeDetailInfo()");
    },[]);

    const bookmarkBtnActionAppend = (el) =>{
        if(!el) return;
        if(el.childNodes.length===0){
            return
        }else{
            const bookmarkList = el.getElementsByClassName("bookmark")
            for(let bookmark of bookmarkList){
                bookmark.onclick = (e) => {
                    handleShow();
                    const params = e.currentTarget.dataset
                    setBookMarkModal(<BookmarkModal docCode={params.doccode} docPart={params.docpart}/>)
                }
            }
        }
    }

    useEffect(() => {
        getCodeTree();
        getCodeDetailInfo(docCode);
    }, []);

    console.log("------------------------------viewer [End]");
    console.groupEnd("viewer");
    return (
        <>
            {treeLoading || docLoading? (<Loading/>):(
                <Row className="mx-0">
                    <Col xs={12} className="border-bottom">
                        <Row>
                            <Col xs={3}></Col>
                            <Col xs={9}>{docCode} {docName}</Col>
                        </Row>
                    </Col>
                    <Col xs={3} className="border-end viewerDiv">
                        {codeTree}
                    </Col>
                    <Col xs={2} className="border-end viewerDiv">
                        {docSummary}
                    </Col>
                    <Col xs={7} className="viewerDiv" ref={bookmarkBtnActionAppend}>
                        {docDetail}
                    </Col>
                </Row>
                )}
            <Modal show={show} onHide={handleClose} size="xl" keyboard={false} scrollable>
                {bookMarkModal}
            </Modal>
        </>
    );
}

CodeViewer.defaultProps = {
    docCode: 'KDS 24 14 30',
    docName: '강교 설계기준(허용응력설계법)'
}

export default CodeViewer;