

import { Link, router } from "@inertiajs/react"
import {
    Pagination,
    PaginationContent,
    PaginationEllipsis,
    PaginationItem,
    PaginationLink,
    PaginationNext,
    PaginationPrevious,
} from "@/components/ui/pagination"
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

type PaginationLinkType = {
    url: string | null
    label: string
    active: boolean
}

type Props = {
    links: PaginationLinkType[]
    meta: {
        current_page: number
        last_page: number
        per_page: number
        total: number
    }
}

export function TablePagination({ links, meta }: Props) {

    const handlePerPageChange = (value: string) => {
        const params = new URLSearchParams(window.location.search)

        params.set("per_page", value)
        params.set("page", "1")

        router.visit(`${window.location.pathname}?${params.toString()}`, {
            preserveState: true,
            replace: true,
        })
    }

    return (
        <div className="flex flex-col sm:flex-row items-center w-full justify-center gap-8 pt-4">

            {/* Rows per page */}
            <div className="flex items-center gap-2">
                <Label className="text-sm text-muted-foreground">  Rows per page
                </Label>
                <Select value={String(meta.per_page)} onValueChange={handlePerPageChange}     >
                    <SelectTrigger className="w-20" size="sm">
                        <SelectValue />
                    </SelectTrigger>
                    <SelectContent >
                        <SelectGroup>
                            {[5, 10, 25, 50, 100].map(v => (
                                <SelectItem key={v} value={String(v)}>
                                    {v}
                                </SelectItem>
                            ))}
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </div>

            {/* Pagination */}
            <Pagination className="mx-0 w-auto">
                <PaginationContent>

                    {links.map((link, i) => {
                        if (link.label.includes("Previous")) {
                            return (
                                <PaginationItem key={i} >
                                    <PaginationPrevious size="sm" href={link.url || ""} className={!link.url ? "opacity-50 pointer-events-none" : ""} />
                                </PaginationItem>
                            )
                        }

                        if (link.label.includes("Next")) {
                            return (
                                <PaginationItem key={i}>
                                    <PaginationNext size="sm" href={link.url || ""} className={!link.url ? "opacity-50 pointer-events-none" : ""} />
                                </PaginationItem>
                            )
                        }

                        if (link.label === "...") {
                            return (
                                <PaginationItem key={i}>
                                    <PaginationEllipsis />
                                </PaginationItem>
                            )
                        }

                        return (
                            <PaginationItem key={i} >
                                <PaginationLink size="sm" isActive={link.active} href={link.url || ""} >
                                    {link.label}
                                </PaginationLink>
                            </PaginationItem>
                        )
                    })}

                </PaginationContent>
            </Pagination>
        </div>
    )
}