// コンパイル時、以下を有効にする。

// import React,{useEffect,useState} from 'react';
// import ReactDOM from 'react-dom';


const { useEffect, useState, useLayoutEffect, useCallback, useRef } = React;

// データ取得関数
async function tableDataGet(parm) {

    let res = await fetch('/api/newsList', {

        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document
                .getElementById('csrf-token')
                .getAttribute('content')
        },
        body: JSON.stringify({

            page: parm['page'],
            category: parm['category'],

        }),
        
    }).then((res) => { return res.json(); });

    console.log(res)

    return {
        data: res['data'],
        categoryList: res['categoryList'],
        pagenation: pagerCreate(res, parm['page'])
    };
}

// ページネーション作成
function pagerCreate(res, pageNum) {

    let prevStatus;
    let nextStatus;
    let pageStart;
    let pageEnd;
    let pagePrev;
    let pageNext;
    let pageNow;

    // 表示ページ数
    pageNum = Number(pageNum);

    // レコード総数
    const totalRecord = Number(res['count']);
    // 総ページ数
    const totalPage = Math.ceil(totalRecord / Number(res['postLimit']));

    // ページの位置を計算
    let pageCalk = Number(Math.ceil(pageNum / Number(res['pageLimit'])));
    // ページ送りの開始位置を計算
    pageStart = pageCalk * Number(res['pageLimit']) - Number(res['pageLimit']) + 1;
    // ページ送りの終わり値を計算
    pageEnd = Number(pageStart + res['pageLimit'] - 1);
    // ページ送りが途中で終わる場合はそれ以降をなしにする
    if (pageEnd >= totalPage) { pageEnd = totalPage; }
    // 値を設定
    pageNow = pageNum;
    pagePrev = pageNum - 1;
    pageNext = pageNum + 1;
    // 前にいけない場合はリンクを消す
    prevStatus = pagePrev == '0' ? 'disabled' : '';
    // 次にいけない場合はリンクを消す
    nextStatus = pageNext > totalPage ? 'disabled' : '';

    const pagenation = {
        'page_start': pageStart,
        'page_end': pageEnd,
        'page_next': pageNext,
        'page_prev': pagePrev,
        'page_now': pageNow,
        'next_status': nextStatus,
        'prev_status': prevStatus,
    };

    return pagenation;
}


function NewsList(props) {

    const [state, setState] = useState({
        'page': json['page'],
        'category': json['category'],
        'categoryList': json['categoryList'],
        'list': json['data'],
        'pagenation': pagerCreate(json, json['page'])
    });
    // 初期化
    useEffect(function () {
    }, [])

    // ページ変更関数
    function changePage(page) {
        document.cookie = 'newsPage=' + page;
        const parm = { page: page, category: state.category };
        tableDataGet(parm).then(json => {
            setState({ 'page': page, 'category': state.category, 'categoryList': { ...json['categoryList'] }, 'list': [...json['data']], 'pagenation': { ...json['pagenation'] } })
        });
    }

    // カテゴリー変更
    function changeCategory(category) {
        document.cookie = 'newsPage=1';
        document.cookie = 'newsCategory=' + category;
        const parm = { page: 1, category: category };
        tableDataGet(parm).then(json => {
            setState({ 'page': 1, 'category': category, 'categoryList': { ...json['categoryList'] }, 'list': [...json['data']], 'pagenation': { ...json['pagenation'] } })
        });
    }

    // console.log(state);


    return (
        <div>
            {/* <CategoryList categoryList={state['categoryList']} selectCategory={state['category']} changeCategory={changeCategory} /> */}
            <List data={state['list']} categoryList={state['categoryList']} pagenation={state['pagenation']} page={state.page} changePage={changePage} />
        </div>
    )

}

// // カテゴリー
// function CategoryList(props){

//     if(Object.keys(props.categoryList).length!=0){

//         // let categoryWidth = 100/( Object.keys(props.categoryList).length + 1 );

//         return(
//             <div className="categoryList row g-2">
//                 <div className="col-6 col-sm-3 ">
//                     <button type="button" class={'w-100 btn '+(props.selectCategory == 0 ?'newsLisitBtn' : 'newsLisitBorder')} onClick={()=>props.changeCategory(0)}>すべて</button>
//                 </div>
//                 {
//                     Object.keys(props.categoryList).map((key) => (
//                         <div className="col-6 col-sm-3 ">
//                             <button type="button" class={'w-100 btn '+(props.selectCategory == key ?'newsLisitBtn' : 'newsLisitBorder')} onClick={()=>props.changeCategory(key)}>{props.categoryList[key]}</button>
//                         </div>
//                     ))
//                 }
//             </div>
//         )
//     }
// }

// 記事
function List(props) {

    if (props.data.length == 0) {
        return (<div className="mt-4">お知らせはありません</div>)
    } else {
        return (
            <div>

                <div>
                    {
                        props.data.map((val, i) => (
                            <div className="mt-3 mt-lg-0">
                                <a href={`/newsPage/${val.id}`}>
                                    <div className="d-lg-flex align-items-center mb-4 pb-lg-0 pb-3 newsBorder">
                                        
                                        <div className="date me-3">
                                            <p>{val.date.replace(/-/g, '.')}</p>
                                        </div>

                                        <div className="text mt-2 mt-lg-0">
                                            <p className="text-truncate">{val.title}</p>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        ))
                    }
                </div>

                <Pagenation pagenation={props.pagenation} page={props.page} changePage={props.changePage} />

            </div>
        )
    }
}

// ページネーション
function Pagenation(props) {
    // let id = props.page;
    let page_start = props.pagenation.page_start;
    let page_end = props.pagenation.page_end;
    let prev_status = props.pagenation.prev_status;
    let next_status = props.pagenation.next_status;
    let page_now = props.pagenation.page_now;
    let page_prev = props.pagenation.page_prev;
    let page_next = props.pagenation.page_next;

    let list = [];

    let span_style = { padding: '0.5rem 0.7rem', fontSize: '1rem' };

    for (let i = page_start; i <= page_end; i++) {
        if (i == page_now) {
            list.push(<li className="page-item active"><span className="page-link" style={span_style}>{page_now}</span></li>);
        } else {
            list.push(<li className="page-item"><span className="page-link" style={span_style} onClick={() => props.changePage(i)}>{i}</span></li>);
        }
    }

    return (
        <div className="mt-4">
            <nav aria-label="Page navigation">
                <ul className="pagination justify-content-center">

                    <li className={'page-item ' + prev_status}>
                        <span className="page-link" style={span_style} onClick={() => props.changePage(page_prev)}>前へ</span>
                    </li>

                    {list}

                    <li class={'page-item ' + next_status}>
                        <span className="page-link" style={span_style} onClick={() => props.changePage(page_next)}>次へ</span>
                    </li>

                </ul>
            </nav>
        </div>
    )

}




// お知らせ一覧
// 初回のみCookie保存
if (document.cookie.indexOf('newsPage=') === -1) {
    document.cookie = 'newsPage=1';
    document.cookie = 'newsCategory=0';
}
// Cookie取得
const page = document.cookie.split('; ').find(row => row.startsWith('newsPage')).split('=')[1];
const category = document.cookie.split('; ').find(row => row.startsWith('newsCategory')).split('=')[1];

// render
if (document.getElementById('newsList')) {
    ReactDOM.render(<NewsList page={page} category={category} />, document.getElementById('newsList'));
}