import React from 'react';
import PropTypes from 'prop-types';
import ReactPaginate from 'react-paginate';

/**
 * A stateless component which renders Pegination. It can accept all standard attributes and events.
 */
const DesktopPagination = props => {

    let pageCount = Math.ceil(props.dataLength / props.pageLimit);

    return (
        <nav className="jp-desktop-pagination">
            <ReactPaginate
                {...props}
                previousLabel={props.previousLabel}
                nextLabel={props.nextLabel}
                breakLabel={<span aria-label='see more pages'>{props.breakLabel}</span>}
                breakClassName={props.breakClassName}
                pageCount={pageCount}
                marginPagesDisplayed={props.marginPagesDisplayed}
                pageRangeDisplayed={props.pageRangeDisplayed}
                onPageChange={props.onPageChange}
                containerClassName={props.containerClassName}
                subContainerClassName={props.subContainerClassName}
                activeClassName={props.activeClassName}                                
            />

        </nav>
    );
};

export default DesktopPagination;

DesktopPagination.propTypes = {
    /** Value of pageCount name which will be added the lenghth of the data to the pagination */
    dataLength: PropTypes.number,
    /** Limit of pageCount name which will be added the limit of the data to the pagination */
    pageLimit: PropTypes.number,
    /** The method to call when a page is clicked. Exposes the current page object as an argument.*/
    onPageChange: PropTypes.func,
    /** Label for the previous button. */
    previousLabel: PropTypes.object,
    /** Set label for next Label */
    nextLabel: PropTypes.object,
    /** Set label for ellipsis Label */
    breakLabel: PropTypes.string,
    /** The classname on tag li of the ellipsis element. */
    breakClassName: PropTypes.string,
    /** The classname of the pagination container.  */
    containerClassName: PropTypes.string,
    /** Class applied to sub container for additional styling  */
    subContainerClassName: PropTypes.string,
    /** The classname for the active page.  */
    activeClassName: PropTypes.string,
    /** Required. The number of pages to display for margins. */
    marginPagesDisplayed: PropTypes.number,
    /** Required. The range of pages displayed. */
    pageRangeDisplayed: PropTypes.number,
};

DesktopPagination.defaultProps = {
    dataLength: '',
    pageRangeDisplayed: 2,
    marginPagesDisplayed: 1,
};