"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 Avatar from '@/assets/icons/avatar.svg'
import Image from 'next/image';
import Link from 'next/link';
import Eye from '@/assets/icons/creatorDashboard/view-eye.svg'
import Bin from '@/assets/icons/creatorDashboard/bin.svg'
import Edit from '@/assets/icons/creatorDashboard/editIcon.svg'
import { Dialog, DialogTrigger, DialogContent, DialogHeader } from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

const AccountTable = () => {

    type AcountUser = {
        id: string,
        user: string;
        email: string;
        status: "active" | "inactive";
        role: string;
        created: string
    };

    const AccountData: AcountUser[] = [
        {
            id: "1",
            user: "Hamza",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Creator",
        },
        {
            id: "2",
            user: "Haider",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Admin",
        },
        {
            id: "3",
            user: "asad",
            created: "Aug 11, 2023",
            status: "inactive",
            email: "ken99@yahoo.com",
            role: "fan",
        },
        {
            id: "4",
            user: "usama",
            created: "Aug 11, 2023",
            status: "inactive",
            email: "ken99@yahoo.com",
            role: "Staff",
        },
        {
            id: "5",
            user: "Hamza",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Creator",
        },
        {
            id: "6",
            user: "Hamza",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Creator",
        },
        {
            id: "7",
            user: "Shoaib",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Fan",
        },
        {
            id: "8",
            user: "Hamza",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Creator",
        },
        {
            id: "9",
            user: "Hamza",
            created: "Aug 11, 2023",
            status: "active",
            email: "ken99@yahoo.com",
            role: "Creator",
        },
    ];

    const AccountColumns: ColumnDef<AcountUser>[] = [
        // {
        //     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: "user",
            header: "USER",
            cell: ({ row }) => (
                <div className=' flex flex-row gap-2 items-center'>
                    <Image className=' rounded-full' src={Avatar} alt='' />
                    <div className="capitalize">{row.getValue("user")}</div>
                </div>
            ),
        },
        {
            accessorKey: "email",
            header: () => <div>EMAIL</div>,
            cell: ({ row }) => (
                <div className="lowercase">{row.getValue("email")}</div>
            ),
        },
        {
            accessorKey: "role",
            header: "ROLE",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("role")}</div>
            ),
        },
        {
            accessorKey: "status",
            header: "STATUS",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("status")}</div>
            ),
        },
        {
            accessorKey: "created",
            header: "CREATED AT",
            cell: ({ row }) => (
                <div className="capitalize">{row.getValue("created")}</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 }) => {
                return (
                    <div className=' flex flex-row gap-3'>
                        <Link href={'#'}>
                            <Image className='size-8 cursor-pointer' src={Eye} alt='' />
                        </Link>
                        <Dialog>
                            <DialogTrigger asChild>
                                <Image className='size-8 cursor-pointer' src={Edit} alt='' />
                            </DialogTrigger>
                            <DialogContent className="bg-white text-black text-center p-0">
                                <Image className='cursor-pointer object-cover w-full h-48' src={Avatar} alt='' />
                                <div className='p-6 space-y-3 text-left'>
                                    <div className="grid md:grid-cols-2 gap-4">
                                        <div>
                                            <Label>Name</Label>
                                            <Input />
                                        </div>
                                        <div>
                                            <Label>Email</Label>
                                            <Input />
                                        </div>
                                        <div>
                                            <Label>Role</Label>
                                            <Input />
                                        </div>
                                        <div>
                                            <Label>Status</Label>
                                            <Input />
                                        </div>
                                    </div>
                                    <Button className='w-full'>Update</Button>
                                </div>
                            </DialogContent>
                        </Dialog>
                        <Dialog>
                            <DialogTrigger asChild>
                                <Image className='size-8 cursor-pointer' src={Bin} alt='' />
                            </DialogTrigger>
                            <DialogContent className="bg-white text-black text-center w-fit m-5">
                                <h1>Are You Sure To Delete?</h1>
                                <div className='bg-gray-200 flex p-3 gap-3'>
                                    <Image className='size-8 cursor-pointer' src={Avatar} alt='' />
                                    <div className='text-xs text-left'>
                                        <p>Italo Melos</p>
                                        <p className='text-gray-300'>Australia | Creator</p>
                                    </div>
                                </div>
                                <div className='flex gap-3'>
                                    <Button variant='link' className='bg-gray-200 w-full'>Cancel</Button>
                                    <Button className='w-full'>Delete</Button>
                                </div>
                            </DialogContent>
                        </Dialog>
                    </div>
                );
            },
        }
    ];
    return (
        <TableComponent data={AccountData} columns={AccountColumns} />
    )
}

export default AccountTable