import React from 'react';
import PropTypes from 'prop-types';
import './styles/Paging.scss';
import { createNamespace } from '../../tools/namingTools';
import { TYPE_PREVIOUS, TYPE_PAGE, handlePageSelect } from '../../tools/paginationHelper';
import { productListDataStore } from '../../store/productListData';
import Icon from '../icon/Icon';

const n = createNamespace('Paging');

const TYPE_ELLIPSIS = 'ellipsis';

const STATUS_SELECTED = 'selected';
const STATUS_DISABLED = 'disabled';

const Paging = ({
    data: {
        pagesList
    },
    size,
    i18n
}) => {
    if (!pagesList || pagesList.length === 0) {
        return null;
    }

    const { listingPage, setListingPage, listingLastPage } = productListDataStore();

    const renderLink = (content, props, modifiers, value) => (
        <a
            {...n('page', modifiers).withTestId().props}
            {...props}
            onClick={e => handlePageSelect(e, value, listingPage, setListingPage, listingLastPage)}
            onKeyDown={() => {}}
        >
            {content}
        </a>
    );

    const getArrowContent = type => {
        const isPreviousArrow = type === TYPE_PREVIOUS;

        return (
            <React.Fragment>
                <Icon type={isPreviousArrow ? 'caretLeft' : 'caretRight'} width="7px" />
                <span {...n('arrowText').withTestId().props}>{isPreviousArrow ? i18n.previous : i18n.next}</span>
            </React.Fragment>
        );
    };

    const renderPage = page => {
        switch (page.type) {
            case TYPE_ELLIPSIS:
                return <span {...n('ellipsis').props} key={page.type}>...</span>;
            default: {
                const content = page.type === TYPE_PAGE ? page.nb : getArrowContent(page.type);
                const value = page.type === TYPE_PAGE ? page.nb : page.type;
                const props = {
                    key: `${page.type}${page.nb}`,
                    href: page.url || '#',
                    disabled: page.status && page.status === STATUS_DISABLED
                };
                const modifiers = page.status === STATUS_SELECTED ? 'current' : '';

                return renderLink(content, props, modifiers, value);
            }
        }
    };

    // divide pages in 3 groups, to wrap them: before ellipsis, ellipsis and after ellipsis
    const ellipsisIndex = pagesList && pagesList.findIndex(page => page.type === TYPE_ELLIPSIS);
    const renderedPages = pagesList && pagesList.map(renderPage);
    const groupNamespaceProps = n('group').props;
    let pageGroups;

    if (ellipsisIndex !== -1) {
        pageGroups = renderedPages && [
            <div key="group1" {...groupNamespaceProps}>{renderedPages.slice(0, ellipsisIndex)}</div>,
            renderedPages.slice(ellipsisIndex, ellipsisIndex + 1),
            <div key="group2" {...groupNamespaceProps}>{renderedPages.slice(ellipsisIndex + 1)}</div>
        ];
    } else {
        pageGroups = renderedPages && <div {...groupNamespaceProps}>{renderedPages}</div>;
    }

    return (
        <div {...n('wrapper', size).props}>
            {pageGroups}
        </div>
    );
};

export const paginationDataShape = {
    nbPages: PropTypes.number,
    start: PropTypes.number,
    simplePagesList: PropTypes.string,
    pagesList: PropTypes.arrayOf(
        PropTypes.shape({
            type: PropTypes.string,
            nb: PropTypes.number,
            status: PropTypes.string,
            url: PropTypes.string
        })
    )
};
Paging.propTypes = {
    data: PropTypes.shape(paginationDataShape),
    size: PropTypes.oneOf(['small']),
    i18n: PropTypes.shape({
        previous: PropTypes.string,
        next: PropTypes.string
    })
};

Paging.defaultProps = {
    data: {
        nbPages: 0,
        start: 0,
        simplePagesList: '',
        pagesList: []
    },
    size: null,
    i18n: {
        previous: 'Previous',
        next: 'Next'
    }
};

export default Paging;
