import React from 'react'
import { ColumnDef } from '@tanstack/react-table'

import { User } from '@/src/interfaces/users/users'
import { ActionButtons } from './ActionButtons'
import { UserStatus } from './UserStatus'

interface Props {
  onOpenChangePasswordModal: (userId: string) => void
  onOpenDeleteModal: (userId: string) => void
}

export const useColumns = ({
  onOpenChangePasswordModal,
  onOpenDeleteModal,
}: Props): ColumnDef<User>[] =>
  React.useMemo(
    () => [
      // { header: 'Avatar', accessorKey: 'avatar' },
      { header: 'Nombre', accessorKey: 'name' },
      { header: 'Apellidos', accessorKey: 'lastname' },
      { header: 'Correo Electrónico', accessorKey: 'email' },
      { header: 'DNI', accessorKey: 'dni' },
      { header: 'Teléfono', accessorKey: 'phone' },
      {
        header: 'Estado',
        accessorKey: 'isActive',
        cell: ({ row }) => <UserStatus isActive={row.original.isActive} />,
      },
      { header: 'Rol', accessorKey: 'roleName' },
      {
        header: 'Acciones',
        cell: ({ row }) => (
          <ActionButtons
            userId={row.original.id}
            onChangePassword={onOpenChangePasswordModal}
            onDelete={onOpenDeleteModal}
          />
        ),
      },
    ],
    [],
  )