import React from 'react';
import {getPagesArray} from "../../../utils/Pages";

const Pagination = ({totalPages, page, changePage, viewAll}) => {
    let pagesArray = getPagesArray(totalPages);
    let previousPage = page !== 1 ? page - 1 : page
    let nextPage = page < pagesArray.length ? page + 1 : page
    
    return (
        <section className="btnSection">
            <button className="allBtn" onClick={() => viewAll()}>Показать весь список</button>
            <div className="choiceBtn">
                <button onClick={() => changePage(previousPage)} className="btnPrevious">
                    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0.238707 8.62179L6.83881 15.7424C7.15713 16.0859 7.6732 16.0859 7.99148 15.7424L8.76127 14.9119C9.07904 14.5691 9.07965 14.0134 8.76263 13.6698L3.53193 7.99998L8.76263 2.33019C9.07965 1.98655 9.07904 1.43091 8.76127 1.08808L7.99148 0.257567C7.67316 -0.0858556 7.15709 -0.0858556 6.83881 0.257567L0.238741 7.37821C-0.0795746 7.72159 -0.0795746 8.27837 0.238707 8.62179Z" fill="black"/>
                    </svg>                        
                </button>
                {pagesArray.map(p => 
                    <button onClick={() => changePage(p)} key={p} className={page === p ? "pageBtn activePage" : "pageBtn"}>{p}</button>
                )} 
                <button onClick={() => changePage(nextPage)} className="btnNext">
                    <svg width="9" height="16" viewBox="0 0 9 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.76129 8.62179L2.16119 15.7424C1.84287 16.0859 1.3268 16.0859 1.00852 15.7424L0.238729 14.9119C-0.0790435 14.5691 -0.0796547 14.0134 0.237371 13.6698L5.46807 7.99998L0.237371 2.33019C-0.0796547 1.98655 -0.0790435 1.43091 0.238729 1.08808L1.00852 0.257567C1.32684 -0.0858556 1.84291 -0.0858556 2.16119 0.257567L8.76126 7.37821C9.07957 7.72159 9.07957 8.27837 8.76129 8.62179Z" fill="black"/>
                    </svg>                        
                </button>
            </div>
        </section>
    );
};

export default Pagination;