"use client"

import { formatMoney } from "@/lib/clientUtils"
import { GetInvoicePayload } from "@/lib/types"
import { Account, InvoiceStatus } from "@prisma/client"
import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import moment, { MomentInput } from "moment"
import { ArrowUpDown } from "lucide-react";
import React from "react"

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.

const columnHelper = createColumnHelper<GetInvoicePayload>();


export const columns: ColumnDef<GetInvoicePayload>[] = [
    {
        accessorKey: "invoiceDate",
        filterFn: "includesString",
        header: ({ column }) => {
            return (
                <button
                    className="flex items-center text-nowrap gap-1"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Invoice Date
                    <ArrowUpDown className="h-4 w-4" />
                </button>
            )
        },
        cell: ({ row }) => {
            return moment(row.getValue("invoiceDate")).format("MM/DD/YYYY");

        }
    },
    {
        accessorFn: (props) => ([props.account.primaryContactFirstName, " " + props.account.primaryContactLastName]),
        header: "Account",
        id: "fullName",
        cell: ({ row }) => {
            console.log({ row });
            return row.getValue("fullName")
            // const account = row.getValue("account") as Account;
            // return <div> {account.primaryContactFirstName} {account.primaryContactLastName}</div>
        }

    },
    {
        accessorKey: "invoiceDueDate",
        header: ({ column }) => {
            return (
                <button
                    className="flex items-center text-nowrap gap-1"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Due Date
                    <ArrowUpDown className="h-4 w-4" />
                </button>
            )
        },
        cell: ({ row }) => {
            return moment(row.getValue("invoiceDueDate")).format("MM/DD/YYYY")
        }
    },
    {
        accessorKey: "invoiceStartDate",
        header: "Date Range",
        cell: ({ row }) => {
            const invoice = row.original;
            return (
                <div>
                    {moment(invoice.invoiceStartDate).format("MM/DD/YYYY")} - {moment(invoice.invoiceEndDate).format("MM/DD/YYYY")}
                </div>
            );
        }
    },
    {
        accessorKey: "invoiceStatus",
        header: ({ column }) => {
            return (
                <button
                    className="flex items-center text-nowrap gap-1"
                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                >
                    Status
                    <ArrowUpDown className="h-4 w-4" />
                </button>
            )
        },
        cell: ({ row }) => {
            const status = row.getValue("invoiceStatus") as InvoiceStatus;
            if (status === InvoiceStatus.PAID) {
                return <div className="bg-green-400/10 text-green-400 font-bold px-1 w-fit">PAID</div>
            }

            if (status === InvoiceStatus.VOID) {
                return <div className="bg-rose-400/10 text-rose-400 font-bold px-1 w-fit">VOID</div>
            }

            if (status === InvoiceStatus.CREATED) {
                return <div className="bg-blue-400/10 text-blue-400 font-bold px-1 w-fit">{InvoiceStatus.CREATED}</div>
            }

        },
    },

    {
        accessorKey: "invoiceAmount",
        header: ({ column }) => {
            return (
                <div className="flex justify-end">
                    <button
                        className="flex items-center text-nowrap gap-1 w-fit"
                        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
                    >
                        Amount
                        <ArrowUpDown className="h-4 w-4" />
                    </button>
                </div>

            )
        },
        cell: ({ row }) => {
            return <div className="text-right font-medium">{formatMoney(parseFloat(row.getValue("invoiceAmount")).toString(), false)}</div>
        },
    }

]