import React from 'react';
import { LeftHover, More, RightHover } from './style';

export const buildPagination = (totalPages: number, current: number) => {
    const collapseLeft = current - 2 > 3;
    const left = collapseLeft
        ? [1, '<', current - 2, current - 1, current]
        : Array.from({ length: current }, (v, k) => k + 1);
    const collapseRight = current + 2 < totalPages - 2;
    const right = collapseRight
        ? [current + 1, current + 2, '>', totalPages]
        : current + 1 > totalPages
        ? []
        : Array.from({ length: totalPages - current }, (v, k) => k + current + 1);
    const result = left.concat(right);
    const rightIndex = result.findIndex(i => i === '>');
    const leftIndex = result.findIndex(i => i === '<');
    if (collapseRight && ~rightIndex && rightIndex < 5) {
        result.splice(
            rightIndex,
            0,
            ...Array.from({ length: 5 - rightIndex }, (v, k) => k + (result[rightIndex - 1] as number) + 1)
        );
    }
    if (collapseLeft && ~leftIndex && result.length - leftIndex < 6) {
        result.splice(
            leftIndex + 1,
            0,
            ...Array.from(
                { length: 7 - result.length },
                (v, k) => k + (result[leftIndex + 1] as number) - 7 + result.length
            )
        );
    }
    return result;
};
export const calNewPage = (current: number, clicked: number | string, totalPages: number) => {
    if (clicked === '<') {
        return current - 5 < 1 ? 1 : current - 5;
    }
    if (clicked === '>') {
        return current + 5 > totalPages ? totalPages : current + 5;
    }
    return clicked as number;
};

export function getButtonContent(content: number | string) {
    if (content === '<') {
        return (
            <>
                <More className="more-normal" />
                <LeftHover className="more-hover" />
            </>
        );
    }
    if (content === '>') {
        return (
            <>
                <More className="more-normal" />
                <RightHover className="more-hover" />
            </>
        );
    }
    return content;
}