import React from 'react';

function EgovPagingPaginationInfo({pagination, setPaginationInfo, moveToPage}) {
    console.groupCollapsed("EgovPagingPaginationInfo");
    console.log("EgovPagingPaginationInfo [pagination] : ", pagination);


    let paginationTag = [];

    if (pagination === undefined) {
        paginationTag = "-";
    } else {
        if(pagination.firstPageNoOnPageList>1){
            // 첫 페이지 이동
            paginationTag.push(<li key="fp" className="btn">
                <button onClick={e => {moveToPage(1)}} className="first">처음</button>
            </li>);

            // 이전 페이지 이동
            const prevPageIndex = pagination.currentPageNo-pagination.pageSize < 0?1:(pagination.currentPageNo-pagination.pageSize)
            paginationTag.push(<li key="pp" className="btn">
                <button onClick={e => {moveToPage(prevPageIndex)}} className="prev">이전</button>
            </li>);
        }
        for (let i = pagination.firstPageNoOnPageList; i <= pagination.lastPageNoOnPageList; i++) {
            if (i === pagination.currentPageNo) {
                // 현재 페이지
                paginationTag.push(<li key={i}>
                    <button className="cur">{i}</button>
                </li>);
            } else {
                // 다른 페이지
                paginationTag.push(<li key={i}>
                    <button onClick={e => {moveToPage(i)}}>{i}</button>
                </li>);
            }
        }
        if(pagination.lastPageNoOnPageList!=pagination.lastPageNo){
            // 다음 페이지 이동
            const nextPageIndex = pagination.currentPageNo+pagination.pageSize > pagination.lastPageNo?pagination.lastPageNo:(pagination.currentPageNo+pagination.pageSize)
            paginationTag.push(<li key="np" className="btn">
                <button onClick={e => {moveToPage(nextPageIndex)}} className="next">다음</button>
            </li>);

            // 마지막 페이지 이동
            paginationTag.push(<li key="lp" className="btn">
                <button onClick={e => {moveToPage(pagination.lastPageNo)}} className="last"></button>
            </li>);
        }
    }
    console.log("paginationTag", paginationTag);
    console.groupEnd("EgovPagingPaginationInfo");

    return (
        <div className="paging">
            <ul>
                {paginationTag}
            </ul>
        </div>
    );
}

export default React.memo(EgovPagingPaginationInfo);