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";
import StandardCodeSearchForm from "./StandardCodeSearchForm";

function StandardCodeList({}) {
    const {listCode} = useParams();
    const [listData, setListData] = useState([])
    const [filterData, setFilterData] = useState('');
    const [resultCnt, setResultCnt] = useState(0);
    const [remarkCnt, setRemarkCnt] = useState(0);
    const [groupSeq, setGroupSeq] = useState();

    const [show, setShow] = 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 retrieveList = useCallback((searchCondition) => {
        if(searchCondition?.tab){
            EgovNet.requestFetch('/standardCode/standard-code-list'+EgovNet.convParams(searchCondition),
                {
                    method: "GET",
                    headers: {
                        'Content-type': 'application/json',
                    }
                },
                (resp) => {
                    setListData(resp.result.resultList);
                    setResultCnt(resp.result.resultCnt.allCnt);
                    setRemarkCnt(resp.result.resultCnt.remarkCnt);
                },
                function (resp) {
                    console.log("err response : ", resp);
                }
            );
        }

    }, []);

    return (
        <div className="StandardCodeList container">
            <div className="c_wrap codeListContent">
                <div className="layout">
                    <div className="contents NOTICE_LIST listTableDiv">
                        <StandardCodeSearchForm param={listCode} reloadFunction={retrieveList} resultCnt={resultCnt} remarkCnt={remarkCnt}/>
                        <div className="board_list code_list">
                            <div className="head">
                                <span>대분류</span>
                                <span>중분류</span>
                                <span>코드번호</span>
                                <span>코드명</span>
                                <span>개정이력</span>
                                <span>보기</span>
                                <span>즐겨찾기</span>
                            </div>
                            <div className="result">
                                {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}<br/><span className={"text-danger"}>{item.rvsnRemark}</span></div>
                                            <div className="Revisionhistory"><a className="vieweratag" onClick={showHandling} data-groupSeq={item.groupSeq}>개정이력</a></div>
                                            <div className="fille"><a className="vieweratag" href={"/standardCode/viewer/" + item.kcscCd}>내용보기</a></div>
                                            <div className="star"><AiFillStar/></div>
                                        </div>
                                    )
                                })}
                            </div>
                        </div>
                        <StandardCodeListModal size={"lg"} show={show} content={groupSeq} onClose={close} title={"개정이력"}/>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default StandardCodeList;