"use client"

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@radix-ui/react-dropdown-menu"
import { ColumnDef } from "@tanstack/react-table"
import { CogIcon, DotIcon } from "../stories/Icon.stories"
import { Button } from "@/components/ui/button"
import { DateDisplay } from "./DateDisplay"

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type PortServer = {
    id: string
    date: string
    info: string
    type: string
}

export const columns: ColumnDef<PortServer>[] = [
  {
    accessorKey: "date",
    header: "Date",
    cell: ({ row }) => {
        const date = new Date(row.getValue("date"))
        return(
            <div className="text-[#637381] bg-[#919EAB29] rounded-md border-4 border-[#919EAB29]">
                <DateDisplay date={date}/>
            </div>
        )
    }
  },
  {
    accessorKey: "info",
    header: "Info",
  },
  {
    accessorKey: "option",
    header:() => {
        return(
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                        <Button variant="ghost" className="h-8 w-8 p-0">
                            <CogIcon />
                        </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuItem
                                onClick={() => {}}
                            >
                                Change Password
                            </DropdownMenuItem>
                        </DropdownMenuContent>
                    </DropdownMenu>
        )
    },
    cell: ({ row }) => {
        const type = row.original
        return ( 
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="h-8 w-8 p-0">
                    <DotIcon />
                </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                {
                    type.type?.toLowerCase() == 'status' ? (
                    <DropdownMenuItem
                        onClick={() => {}}
                    >
                        Info
                    </DropdownMenuItem>
                    ) : ''
                }
                {
                    type.type?.toLowerCase() == 'result' ? (
                    <>
                        <DropdownMenuItem onClick={() => {}} >
                        Raw Data
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => {}}>
                        Result
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => {}}>
                        Export
                        </DropdownMenuItem>
                    </> 
                    ) : ''
                }
                {
                    type.type?.toLowerCase() == 'query' ? (
                    <>
                        <DropdownMenuItem onClick={() => {}}>
                        Raw Data
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => {}}>
                        Query Response
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => {}}>
                        Export
                        </DropdownMenuItem>
                    </>
                    ) : ''
                }
                </DropdownMenuContent>
            </DropdownMenu>
        )}
  },
]
