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 { ColumnDef } from "@tanstack/react-table"
import { ArrowUpDown } from "lucide-react"

const CourseTable: React.FC<{
    mutate: () => void
    Data: Array<any>
    isLoading: boolean
}> = ({
          mutate,
          Data,
          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?.name,
            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?.coverImage ?? 'no image path'}
                            alt={row.original?.name}
                        />
                    </Avatar>
                    <p>{row.original?.name}</p>
                </div>
            ),
        },
        {
            id: 'description',
            accessorFn: (row: any) => row.original?.description,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="!px-0"
                >
                    Description
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div className="max-w-[300px] truncate">{row.original?.description ?? '-'}</div>
            ),
        },
        {
            id: 'author',
            accessorFn: (row: any) => row.original?.author?.firstName,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    className="!px-0"
                >
                    Author
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div>{row.original?.author?.firstName} {row.original?.author?.lastName}</div>
            ),
        },
        {
            id: 'category',
            accessorFn: (row: any) => row.original?.category?.name,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    className="!px-0"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Category
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div className="capitalize">{row.original?.category?.name}</div>
            ),
        },
        {
            id: 'creationDate',
            accessorFn: (row: any) => row.original?.creationDate,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    className="!px-0"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Published Date
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div className="whitespace-nowrap">
                    {row.original?.creationDate ? new Date(row.original.creationDate).toLocaleDateString() : '-'}
                </div>
            ),
        },
        {
            id: 'isActive',
            accessorFn: (row: any) => row.original?.isActive,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    className="!px-0"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Status
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div>{row.original?.isActive ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div>
            ),
        },
        {
            id: 'totalEnrolled',
            accessorFn: (row: any) => row.original?.totalEnrolled,
            header: ({ column }) => (
                <Button
                    variant="ghost"
                    className="!px-0"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Students
                    <ArrowUpDown className="ml-2 h-4 w-4" />
                </Button>
            ),
            cell: ({ row }) => (
                <div>
                    {row.original?.totalEnrolled ?? '-'}
                </div>
            ),
        },
    ]

    return(
        <>
            <DataTable
                data={Data}
                columns={columns}
                mutate={mutate}
                searchKey="name"
                isLoading={isLoading}
            />
        </>
    )
}

export default CourseTable