import { IListQuotes_Response_DTO } from "@shared/contexts";
import { ColumnDef } from "@tanstack/react-table";

import { DataTablaRowActionFunction, DataTableRowActions } from "@/components";
import { Badge } from "@/ui";
import { useMemo } from "react";

export const useQuoteDataTableColumns = (
  actions: DataTablaRowActionFunction<IListQuotes_Response_DTO, unknown>
): ColumnDef<IListQuotes_Response_DTO>[] => {
  const customerColumns: ColumnDef<IListQuotes_Response_DTO>[] = useMemo(
    () => [
      /*{
      id: "complete_name",
      header: "Nombre",
      accessorFn: (row) => (
        <div className="flex items-center justify-between space-x-4">
          <div className="flex items-center space-x-4">
            <Avatar>
              <AvatarImage src={row.photo_url} />
              <AvatarFallback>
                {acronym(`${row.first_name} ${row.last_name}`)}
              </AvatarFallback>
            </Avatar>
            <div>
              <p className="text-base font-semibold">{`${row.first_name} ${row.last_name}`}</p>
              <p className="mt-1">{row.job_title}</p>
            </div>
          </div>
        </div>
      ),
      enableSorting: true,
      sortingFn: "alphanumeric",
      enableHiding: false,

      cell: ({ renderValue }) => (
        <span className="w-full">
          <>{renderValue()}</>
        </span>
      ),
    },*/
      {
        id: "state",
        accessorKey: "state",
        header: "Estado",
        cell: ({ renderValue }) => (
          <Badge variant={"destructive"}>
            <>{renderValue()}</>
          </Badge>
        ),
      },
      {
        id: "client",
        accessorKey: "client",
        header: "Cliente",
        enableSorting: false,
        sortingFn: "alphanumeric",
      },
      {
        id: "actions",
        header: "Acciones",
        cell: ({ row }) => {
          return <DataTableRowActions row={row} actions={actions} />;
        },
      },
    ],
    [actions]
  );
  return customerColumns;
};