// Cookieを設定する関数
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
      const date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value) + expires + "; path=/";
  }
  
  // Cookieを取得する関数
  function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }
  
  // Cookieを削除する関数
  function eraseCookie(name) {
    document.cookie = name + '=; Max-Age=-99999999;';
  }

const PaginatedList = ({ list, itemsPerPage = 10, mode, currentPage, setCurrentPage}) => {
    
    const [shouldScroll, setShouldScroll] = useState(false);
    const paginationRef = useRef(null)

    const indexOfLastItem = currentPage * itemsPerPage;
    const indexOfFirstItem = indexOfLastItem - itemsPerPage;
    const currentItems = list.slice(indexOfFirstItem, indexOfLastItem);
  
    const totalPages = Math.ceil(list.length / itemsPerPage);
    
  
    const paginate = (pageNumber) => {
        setCurrentPage(pageNumber);
        setShouldScroll(true);
    }

    useEffect(() => {
        if(getCookie("page")){
            setCurrentPage(parseInt(getCookie("page")));
            eraseCookie("page");
        }
        
    }, [list]);

    useEffect(() => {
        if (shouldScroll && paginationRef.current) {
            paginationRef.current.scrollIntoView({ behavior: 'auto' });
            setShouldScroll(false);
        }
    }, [currentPage, shouldScroll]);

    // カスタムスタイルを定義
    const customStyles = `
    .pagination-link {
        color: #aaaaaa;  /* デフォルトの青色 */
    }
    .pagination-link.is-current {
        background-color: #A1A38D;
        color: #444444;  /* デフォルトの青色 */
        border-color: #aaaaaa;
    }
    .pagination-link:hover {
        color: #363636;
    }
    `;
  
    return (
      <div>
        <style>{customStyles}</style>
        <div style={{marginBottom: "20px"}}>
          {currentItems.map((item, index) => (
            <div key={index}>
              <Card data={item} onClick={() => {
                    setCookie("offset", window.scrollY);
                    setCookie("mode", mode);
                    setCookie("page", currentPage);
              }}/>
            </div>
          ))}
        </div>
        
        {
            currentItems.length > 0 &&  
            <nav className="pagination is-centered" role="navigation" aria-label="pagination" ref={paginationRef}>
            <button
                className="pagination-previous"
                onClick={() => paginate(currentPage - 1)}
                disabled={currentPage === 1}
            >
                Previous
            </button>
            <button
                className="pagination-next"
                onClick={() => paginate(currentPage + 1)}
                disabled={currentPage === totalPages}
            >
                Next page
            </button>
            <ul className="pagination-list">
                {Array.from({ length: totalPages }, (_, i) => i + 1).map((number) => (
                <li key={number}>
                    <button
                    className={`pagination-link ${currentPage === number ? 'is-current' : ''}`}
                    aria-label={`Goto page ${number}`}
                    onClick={() => paginate(number)}
                    >
                    {number}
                    </button>
                </li>
                ))}
            </ul>
            </nav>
        }
      </div>
    );
  };