import DataTable from "@/components/(dashboard)/common/DataTable/DataTable"
import { Button } from "@/components/(dashboard)/ui/button"
import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { routes } from "@/lib/routes"
import { ColumnDef } from "@tanstack/react-table"
import { ArrowUpDown } from "lucide-react"
import Link from "next/link"

const UserTable :React.FC<{
  mutate : () => void
  userData : Array<any>
  isLoading : boolean
}> = ({
  mutate , 
  userData , 
  isLoading
}) => {

  const columns: ColumnDef<any>[] = [
    {
        accessorKey: "sn",
        header: "SN",
        cell: ({ row }) => (
            <div className="capitalize">{row.index + 1}</div>
        ),
    },
    {
        id: 'name',
        accessorFn: (row: any) => row.original?.firstName,
        header: ({ column }) => (
            <Button
                variant="ghost"
                className="!px-0"
                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
            >
                Name
                <ArrowUpDown className="ml-2 h-4 w-4" />
            </Button>
        ),
        cell: ({ row }) => (
            <div className="capitalize flex gap-2">
                <Avatar className="h-8 w-8">
                    <AvatarImage 
                        src={row.original?.profilePicture ?? 'no image path'} 
                        alt={row.original?.firstName} 
                    /> 
                </Avatar>
                <p>{row?.original?.firstName}</p>
            </div>
        ),
    },
    {
        id: 'email',
        accessorFn: (row: any) => row.original?.email,
        header: ({ column }) => (
            <Button
                variant="ghost"
                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                className="!px-0"
            >
                Email
                <ArrowUpDown className="ml-2 h-4 w-4" />
            </Button>
        ),
        cell: ({ row }) => (
            <div>{row.original?.email}</div>
        ),
    },
    {
        id: 'dateOfBirth',
        accessorFn: (row: any) => row.original?.dateOfBirth,
        header: ({ column }) => (
            <Button
                variant="ghost"
                className="!px-0"
                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
            >
                DateOfBirth
                <ArrowUpDown className="ml-2 h-4 w-4" />
            </Button>
        ),
        cell: ({ row }) => (
            <div className="capitalize">{row.original?.dateOfBirth}</div>
        ),
    },
    {
        id: 'isActivated',
        accessorFn: (row: any) => row.original?.isActivated,
        header: ({ column }) => (
            <Button
                variant="ghost"
                className="!px-0"
                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
            >
                IsActive
                <ArrowUpDown className="ml-2 h-4 w-4" />
            </Button>
        ),
        cell: ({ row }) => (
            <div>{row.original?.isActivated ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div>
        ),
    },
    {
        id: 'last_online_at',
        accessorFn: (row: any) => row.original?.lastOnline,
        header: ({ column }) => (
            <Button
                variant="ghost"
                className="!px-0"
                onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
            >
                lastOnline
                <ArrowUpDown className="ml-2 h-4 w-4" />
            </Button>
        ),
        cell: ({ row }) => (
            <div>
                {row.original?.lastOnline ?? '-'} 
            </div>
        ),
    },
]
  return(
    <>
      <DataTable 
        data={userData}
        columns={columns}
        mutate={mutate}
        searchKey="username"
        isLoading={isLoading}
      />
    </>
  )
}

export default UserTable