"use client"
import React from 'react'
import { ColumnDef } from "@tanstack/react-table";
import { Checkbox } from "@/components/ui/checkbox";
import TableComponent from '@/components/shared/table'
import { Button } from '@/components/ui/button'
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Eye from '@/assets/icons/creatorDashboard/view-eye.svg'
import Bin from '@/assets/icons/creatorDashboard/bin.svg'
import Download from '@/assets/icons/creatorDashboard/download.svg'

import { ArrowUpDown, MoreHorizontal } from 'lucide-react'
import Link from 'next/link';
import Image from 'next/image';

const PaymentTable = () => {

    type Payments = {
        id: string,
        artist: string;
        from: string;
        fee: string;
        to: string;
        date: string,
        type: string
    };

    const PaymentData: Payments[] = [
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
        {
            id: "1",
            artist: "Hamza",
            from: "m.umer@baramdatsol.com",
            fee: "$25",
            to: "ken99@yahoo.com",
            date: "aug 11, 2012",
            type: "Donation"
        },
    ];

    const PaymentColumns: ColumnDef<Payments>[] = [
        // {
        //     id: "select",
        //     header: ({ table }) => (
        //         <Checkbox
        //             checked={
        //                 table.getIsAllPageRowsSelected() ||
        //                 (table.getIsSomePageRowsSelected() && "indeterminate")
        //             }
        //             onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        //             aria-label="Select all"
        //         />
        //     ),
        //     cell: ({ row }) => (
        //         <Checkbox
        //             checked={row.getIsSelected()}
        //             onCheckedChange={(value) => row.toggleSelected(!!value)}
        //             aria-label="Select row"
        //         />
        //     ),
        //     enableSorting: false,
        //     enableHiding: false,
        // },
        {
            accessorKey: "id",
            header: "#",
            cell: ({ row }) => (
                <div className="capitalize"> {row.getValue("id")}</div>
            ),
        },
        {
            accessorKey: "artist",
            header: "ARTIST NAME",
            cell: ({ row }) => (
                <div className="capitalize"> {row.getValue("artist")}</div>
            ),
        },
        {
            accessorKey: "from",
            header: () => <div>FROM</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("from")}</div>
            ),
        },
        {
            accessorKey: "fee",
            header: "FEE",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("fee")}</div>
            ),
        },
        {
            accessorKey: "to",
            header: "TO",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("to")}</div>
            ),
        },
        {
            accessorKey: "date",
            header: "DATE/TIME",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("date")}</div>
            ),
        },
        {
            accessorKey: "type",
            header: "TYPE",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("type")}</div>
            ),
        },
        // {
        //     accessorKey: "type",
        //     header: ({ column }) => {
        //         return (
        //             <Button
        //                 variant="ghost"
        //                 onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        //             >
        //                 Type
        //                 <ArrowUpDown className="ml-2 h-4 w-4" />
        //             </Button>
        //         );
        //     },
        //     cell: ({ row }) => <div className="lowercase">{row.getValue("type")}</div>,
        // },
        // {
        //     id: "actions",
        //     header: () => <div>ACTIONS</div>,
        //     enableHiding: false,
        //     cell: ({ row }) => {
        //         const payment = row.original;

        //         return (
        //             <DropdownMenu>
        //                 <DropdownMenuTrigger asChild>
        //                     <Button variant="ghost" className="h-8 w-8 p-0">
        //                         <span className="sr-only">Open menu</span>
        //                         <MoreHorizontal className="h-4 w-4" />
        //                     </Button>
        //                 </DropdownMenuTrigger>
        //                 <DropdownMenuContent align="end">
        //                     {/* <DropdownMenuLabel>Actions</DropdownMenuLabel> */}
        //                     <DropdownMenuItem>View</DropdownMenuItem>
        //                     <DropdownMenuSeparator />
        //                     <DropdownMenuItem>Edit</DropdownMenuItem>
        //                     <DropdownMenuSeparator />
        //                     <DropdownMenuItem>Delete</DropdownMenuItem>
        //                 </DropdownMenuContent>
        //             </DropdownMenu>
        //         );
        //     },
        // },
        {
            id: "actions",
            header: () => <div>ACTIONS</div>,
            enableHiding: false,
            cell: ({ row }) => {
                const payment = row.original;

                return (
                    <div className=' flex flex-row gap-3'>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Eye} alt='' />
                        </Link>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Download} alt='' />
                        </Link>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Bin} alt='' />
                        </Link>
                    </div>
                );
            },
        },
    ];
    return (
        <TableComponent data={PaymentData} columns={PaymentColumns} />
    )
}

export default PaymentTable