"use client"
import React from 'react'
import { ColumnDef } from "@tanstack/react-table";
import TableComponent from '@/components/shared/table'
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 Link from 'next/link';
import Image from 'next/image';
import {
    Dialog,
    DialogContent,
    DialogTrigger,
} from "@/components/ui/dialog"
import InvoiceDialog from '@/components/shared/invoice';
const BookingsTable = () => {

    type Booking = {
        id: string,
        creator: string;
        fee: string;
        location: string;
        date: string,
        status: string,
    };

    const BookingsData: Booking[] = [
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
        {
            id: "1",
            creator: "Hamza",
            status: "Completed",
            fee: "$25",
            location: "ken99@yahoo.com",
            date: "aug 11, 2012",
        },
    ];

    const BookingsColumns: ColumnDef<Booking>[] = [
        // {
        //     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: "BOOKING ID",
            cell: ({ row }) => (
                <div className="capitalize"> {row.getValue("id")}</div>
            ),
        },
        {
            accessorKey: "creator",
            header: "CREATOR",
            cell: ({ row }) => (
                <div className="capitalize"> {row.getValue("creator")}</div>
            ),
        },
        {
            accessorKey: "fee",
            header: "FEE",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("fee")}</div>
            ),
        },
        {
            accessorKey: "date",
            header: "DATE/TIME",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("date")}</div>
            ),
        },
        {
            accessorKey: "location",
            header: "LOCATION",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("location")}</div>
            ),
        },
        {
            accessorKey: "status",
            header: "STATUS",
            cell: ({ row }) => (
                <div className="uppercase text-sm">{row.getValue("status")}</div>
            ),
        },
        {
            id: "actions",
            header: () => <div>ACTIONS</div>,
            enableHiding: false,
            cell: ({ row }) => {
                const payment = row.original;

                return (
                    <div className=' flex flex-row gap-3'>
                        <div className=''>
                            <Dialog>
                                <DialogTrigger asChild>
                                    <Image className='size-8 cursor-pointer' src={Eye} alt='' />
                                </DialogTrigger>
                                <DialogContent className="bg-white text-black p-0.5 ">
                                    <InvoiceDialog title='Booking Details' />
                                </DialogContent>
                            </Dialog>
                        </div>
                        <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={BookingsData} columns={BookingsColumns} />
    )
}

export default BookingsTable