import React, {useState, useEffect, useCallback, useRef} from 'react';
import {Link, useLocation, useParams} from 'react-router-dom';

import * as EgovNet from 'api/egovFetch';
import URL from 'constants/url';
import {StandardCodeListModal, StandardCodeListModalTable} from './StandardCodeListModal'
import {AiFillFileMarkdown, AiFillStar} from "react-icons/ai";

function StandardCodeList(props) {
    const {listCode} = useParams();
    const [show, setShow] = useState(false);
    const [groupSeq, setgroupSeq] = useState();

    console.group("StandardCodeList");
    console.log("[Start] StandardCodeList ------------------------------");
    console.log("StandardCodeList [props] : ", props);
    console.log("listcode----------------------------" + listCode);

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

    const category1Ref = useRef();
    const category2Ref = useRef();
    const category3Ref = useRef();
    const wrdRef = useRef();

    // eslint-disable-next-line no-unused-vars
    const [searchCondition, setSearchCondition] = useState(location.state?.searchCondition || {
        pageIndex: 1,
        tab: listCode?.substring(0, 2),
        category1: listCode?.substring(2, 4),
        category2: listCode?.substring(4, 6),
        searchWrd: ''
    });// 기존 조회에서 접근 했을 시 || 신규로 접근 했을 시
    const [masterBoard, setMasterBoard] = useState({});

    /* 검색기능 추가 변수*/
    const [listData, setlistData] = useState([]);
    const [filterData, setFilterData] = useState('');
    const [category1List, setCategory1List] = useState([]);
    const [category2List, setCategory2List] = useState([]);
    const [category3List, setCategory3List] = useState([]);
    const [resultCnt, setResultCnt] = useState(0);

    /* 탭 */
    const [activeTab, setActiveTab] = useState(10);
    const [subTabsVisible, setSubTabsVisible] = useState(false);

    function close() {
        setShow(false);
    }
    
    function showHandling(e) {
        const param = e.currentTarget.dataset;
        const groupSeq = param.groupSeq;
        console.log(groupSeq);
        EgovNet.requestFetch(
            '/standardCode/codeListModal.do',
            {
                method: "POST",
                headers: {
                    'Content-type': 'application/json'
                },
                body: JSON.stringify(
                    groupSeq
                )
            }, (resp) => {
                console.log(resp + "------------------------resp")
                const body = [];
                const head = [];
                if (resp.length > 0) {

                    resp.forEach(function (item, index) {
                        const formattedDate = item.aplcnBgngYmd.match(/\d{4}-\d{2}-\d{2}/)[0];
                        const url = "https://www.kcsc.re.kr/file/DownloadGrp/" + item.docFileGrpId;
                        body.push(
                            <tr>
                                <td>{formattedDate}</td>
                                <td><a href={url}><AiFillFileMarkdown/></a></td>
                                <td></td>
                            </tr>)
                    })
                    head.push(
                        <tr>
                            <td>년도</td>
                            <td>기준코드</td>
                            <td>신구건설기준비교</td>
                        </tr>
                    )
                }

                setgroupSeq(<StandardCodeListModalTable head={head} content={body}/>);
            }
        )
        setShow(true);

    }

    
    const handleTabClick = (tabName) => {
        setActiveTab(tabName);

        const updatedCondition = {
            ...searchCondition,
            tab: tabName,
            category1: '',
            category2: '',
            category3: '',
            searchWrd: '',
        };

        setSearchCondition(updatedCondition);
        retrieveList(updatedCondition);

        if ([40, 50, 60, 70, 80, 90].includes(tabName)) {
            setSubTabsVisible(true);
        } else {
            setSubTabsVisible(false);
        }
    };

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

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

        EgovNet.requestFetch(retrieveListURL,
            requestOptions,
            (resp) => {
                setMasterBoard(resp.result.tnDocumentInfo);
                /*검색을 위한 리스트 state에 저장*/
                setlistData(resp.result.resultList);
                setCategory1List(resp.result.category1List);
                setCategory2List(resp.result.category2List);
                setCategory3List(resp.result.category3List);
                setResultCnt(resp.result.resultCnt);
                // 리스트 항목 구성
            },
            function (resp) {
                console.log("err response : ", resp);
            }
        );
        console.groupEnd("StandardCodeList.retrieveList()");
    }, []);

    useEffect(() => {
        retrieveList(searchCondition);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    console.log("------------------------------StandardCodeList [End]");
    console.groupEnd("StandardCodeList");
    return (
        <div className="StandardCodeList container">
            <div className="c_wrap codelistcontent">
                <div className="location">
                    <ul>
                        <li><Link to={URL.MAIN} className="home">Home</Link></li>
                        <li><Link to='#'>건설기준코드</Link></li>
                        <li><Link to={URL.STANDARD_CODE_LIST}>건설기준코드 검색</Link></li>
                    </ul>
                </div>
                <div className="layout">
                    <div className="contents NOTICE_LIST listtablediv">
                        <div className="top_tit">
                            <h2 className="tit_1">건설기준코드 검색</h2>
                        </div>
                        <div className="condition">
                            <ul>
                                <li className="third_1 L">
                                    <div className={`tab ${activeTab === 10 ? 'active' : ''}`} onClick={() => handleTabClick(10)}>설계기준</div>
                                </li>
                                <li className="third_1 L">
                                    <div className={`tab ${activeTab === 20 ? 'active' : ''}`} onClick={() => handleTabClick(20)}>표준시방서</div>
                                </li>
                                <li className="third_1 L">
                                    <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(activeTab) ? 'active' : ''}`} onClick={() => handleTabClick(40)}>전문시방서</div>
                                </li>
                                <li className="third_1 L">
                                    <label className="f_select" htmlFor="sel1">
                                        <select id="sel1" title="조건" value={searchCondition.category1} ref={category1Ref}
                                                onChange={e => {
                                                    const updatedCondition = {
                                                        ...searchCondition,
                                                        category1: e.target.value,
                                                        category2: '',
                                                        category3: '',
                                                        searchWrd: wrdRef.current.value,
                                                        tab: activeTab
                                                    };

                                                    setSearchCondition(updatedCondition);
                                                    retrieveList(updatedCondition);
                                                }}
                                        >
                                            <option value="">전체</option>
                                            {category1List.map(category => (
                                                <option key={category.groupSeq} value={category.groupFullCd.substring(2, 4)}>{category.groupNm}</option>
                                            ))}
                                        </select>
                                    </label>
                                </li>
                                <li className="third_1 L">
                                    <label className="f_select w_306" htmlFor="sel1">
                                        <select id="sel2" title="조건" value={searchCondition.category2} ref={category2Ref}
                                                onChange={e => {
                                                    const updatedCondition = {
                                                        ...searchCondition,
                                                        category1: category1Ref.current.value,
                                                        category2: category2Ref.current.value,
                                                        category3: '',
                                                        searchWrd: wrdRef.current.value,
                                                        tab: activeTab
                                                    };

                                                    setSearchCondition(updatedCondition);
                                                    retrieveList(updatedCondition);
                                                }}
                                        >
                                            <option value="">전체</option>
                                            {category2List.map(category => (
                                                <option key={category.groupSeq} value={category.groupFullCd.substring(4, 6)}>{category.groupNm}</option>
                                            ))}
                                        </select>
                                    </label>
                                </li>
                                <li className="third_1 L">
                                    <label className="f_select w_306" htmlFor="sel1">
                                        <select id="sel3" title="조건" value={searchCondition.category3} ref={category3Ref}
                                                onChange={e => {
                                                    const updatedCondition = {
                                                        ...searchCondition,
                                                        category1: category1Ref.current.value,
                                                        category2: category2Ref.current.value,
                                                        category3: category3Ref.current.value,
                                                        searchWrd: wrdRef.current.value,
                                                        tab: activeTab
                                                    };

                                                    setSearchCondition(updatedCondition);
                                                    retrieveList(updatedCondition);
                                                }}
                                        >
                                            <option value="">전체</option>
                                            {category3List.map(category => (
                                                <option key={category.groupSeq} value={category.groupFullCd.substring(6, 8)}>{category.groupNm}</option>
                                            ))}
                                        </select>
                                    </label>
                                </li>
                                <li className="third_1 L">
                                    <div className={`tab`}>통합 다운로드</div>
                                </li>
                            </ul>
                        </div>
                        {/* <!--// 검색조건 --> */}
                        {subTabsVisible && (
                            <div className="right_col">
                                <div className="mini_board">
                                    <ul>
                                        <div className={`tab ${activeTab === 40 ? 'active' : ''}`} onClick={() => handleTabClick(40)}>서울특별시</div>
                                        <div className={`tab ${activeTab === 50 ? 'active' : ''}`} onClick={() => handleTabClick(50)}>고속도로공사</div>
                                        <div className={`tab ${activeTab === 60 ? 'active' : ''}`} onClick={() => handleTabClick(60)}>한국농어촌공사</div>
                                        <div className={`tab ${activeTab === 70 ? 'active' : ''}`} onClick={() => handleTabClick(70)}>철도건설공사</div>
                                        <div className={`tab ${activeTab === 80 ? 'active' : ''}`} onClick={() => handleTabClick(80)}>LH한국토지주택공사</div>
                                        <div className={`tab ${activeTab === 90 ? 'active' : ''}`} onClick={() => handleTabClick(90)}>K-Water</div>
                                    </ul>
                                </div>
                            </div>
                        )}
                        <div><span>전체 {resultCnt} 건</span></div>
                        {/* <!-- 게시판목록 --> */}
                        <div className="board_list BRD002 code_list">
                            <div className="head">
                                <span>대분류</span>
                                <span>중분류</span>
                                <span>코드번호</span>
                                <span>코드명</span>
                                <span>개정이력</span>
                                <span>보기</span>
                                <span>다운로드</span>
                                <span>즐겨찾기</span>
                            </div>
                            <div className="result">

                                {/*검색기능 filterData가 없는경우 모든 데이터 출력*/}
                                {listData.filter(item => {
                                    if (item.groupNm.includes(filterData)) {
                                        return item
                                    }
                                    return null
                                }).map(item => {
                                    return (
                                        <div className="list_item List_Codes">
                                            <div className="mainCategory">{item.mainCategory}</div>
                                            <div className="middleCategory">{item.middleCategory}</div>
                                            <div className="kcscCd">{item.kcscCd}</div>
                                            <div className="groupNm">{item.groupNm}</div>
                                            <div className="Revisionhistory"><a className="vieweratag" onClick={showHandling} data-groupSeq={item.groupSeq}>개정이력</a></div>
                                            <div className="fille">{item.contentcount > 0 ? <a className="vieweratag" href={"/standardCode/viewer/" + item.kcscCd}>내용보기</a> : null}</div>
                                            <div className="viewer">{item.docFileGrpId == null ? null :
                                                <a href={"https://www.kcsc.re.kr/file/DownloadGrp/" + item.docFileGrpId}><AiFillFileMarkdown/></a>}</div>
                                            <div className="star"><AiFillStar/></div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                        {/* <!--// 게시판목록 --> */}


                        {/* <!-- Paging --> */}

                        {/* <!--/ Paging --> */}
                        <StandardCodeListModal size={"lg"} show={show} content={groupSeq} onClose={close} title={"개정이력"}/>


                        {/* <!--// 본문 --> */}
                    </div>
                </div>
            </div>
        </div>
    );
}


export default StandardCodeList;