import Button from "./Button";
import tw, { styled } from "twin.macro"
import 'styled-components/macro'

function CustomBtn({children, setPage, currentPage, page, css, ...props}){
    console.log(css)
    return <Button onClick={()=>{setPage(page??children); console.log(page??children)}} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
}

export default function Pagination({ currentPage, maxPages, setPage, ...props }) {

    function RenderButtons() {
        switch (maxPages) {
            case 1:
                return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
            case 2:
                return <>
                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
                </>
            case 3:
                return <>
                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
                </>
            case 4:
                return <>
                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
                </>
            case 5:
                return <>
                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
                </>
            default: {
                return <>
                    {currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
                    <CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
                    <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
                    {(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
                    {(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
                    {(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
                </>
            }

        }
    }

    return (
        <div {...props}>
            <RenderButtons />
        </div>
    )
}