import { ColumnDef, Row } from "@tanstack/react-table"
import { Eye, Pencil, Trash2 } from "lucide-react"
import PricePlanModel from "../model/price-plan-model"
import { useRouter } from "next/navigation"

export interface PricePlan {
    name: string
    type: string
    code: string
    validPeriod: string
}

interface Props {
    onClickDelete: (id: string) => void
}

export default function PricePlanColumns({
    onClickDelete
}: Props): ColumnDef<PricePlanModel>[] {
    const router = useRouter()
    // const setFields = priceplandeta

    const onNavigate = (row: Row<PricePlanModel>) => {
        router.push(`/main/price-plan/${row.original.getId()}`)
        // setFields({
        //     pricplanId: row.original.getId(),
        //     name: row.original.getName(),
        //     version: row.original.getValidPeriod()
        // })
    }
    return [
        {
            accessorKey: "name",
            header: () => <div className="text-left">Price Plan Name</div>,
            cell: ({ row }) => <div className="text-[#0096A6]">{row.getValue("name")}</div>,
        },
        {
            accessorKey: "type",
            header: () => <div className="text-left">Price Plan Type</div>,
            cell: ({ row }) => <div>{row.getValue("type")}</div>,
        },
        {
            accessorKey: "code",
            header: () => <div className="text-left">Price Plan Code</div>,
            cell: ({ row }) => <div>{row.getValue("code")}</div>,
        },
        {
            accessorKey: "validPeriod",
            header: () => <div className="text-left">Valid Period</div>,
            cell: ({ row }) => <div>{row.getValue("validPeriod")}</div>,
        },
        {
            id: "operations",
            header: () => <div className="text-left">Action</div>,
            cell: ({row}) => {
                const id = row.original.getId()
                return <div className="flex items-center gap-4">
                    <Eye size={18} className="text-[#36587A] cursor-pointer" onClick={() => onNavigate(row)}/>
                    <Pencil size={18} className="text-[#36587A] cursor-pointer" />
                    <Trash2 size={18} className="text-[#E46A56] cursor-pointer" onClick={() => onClickDelete(id)} />
                </div>
            },
        },
    ]
}