import React from 'react'

import { Student } from '@/src/interfaces/users/students'
import { ColumnDef } from '@tanstack/react-table'
import { StudentStatus } from './StudentStatus'
import { ActionButtons } from './ActionButtons'

import moment from 'moment-timezone'

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

export const useColumns = ({
  onOpenChangePasswordModal,
  onOpenDeleteModal,
}: Props) =>
  React.useMemo<ColumnDef<Student>[]>(
    () => [
      {
        header: 'Código de Estudiante',
        accessorKey: 'code',
        cell: ({ row }) => (
          <span className="text-nowrap">{row.original.code}</span>
        ),
      },
      {
        header: 'Nombre',
        accessorKey: 'name',
        cell: ({ row }) => (
          <span className="text-nowrap">{row.original.name}</span>
        ),
      },
      {
        header: 'Apellidos',
        accessorKey: 'lastname',
        cell: ({ row }) => (
          <span className="text-nowrap">{row.original.lastname}</span>
        ),
      },
      {
        header: 'Programa de estudios',
        accessorKey: 'studyProgram.name',
        enableSorting: false,
        cell: ({ row }) => (
          <span className="text-nowrap">{row.original.studyProgram.name}</span>
        ),
      },
      { header: 'Correo Electrónico', accessorKey: 'email' },
      { header: 'DNI', accessorKey: 'dni' },
      {
        header: 'Teléfono',
        accessorKey: 'phone',
      },
      { header: 'Dirección', accessorKey: 'address' },
      {
        header: 'Fecha de Cumpleaños',
        accessorKey: 'dateOfBirth',
        cell: ({ row }) =>
          row.original.dateOfBirth &&
          moment(row.original.dateOfBirth).utc().format('DD/MM/YYYY'),
      },
      { header: 'Género', accessorKey: 'gender' },
      {
        header: 'Promoción',
        accessorKey: 'enrollmentPromotion.year',
        enableSorting: false,
      },
      {
        header: 'Situación Académica',
        accessorKey: 'enrollmentStatus.name',
        enableSorting: false,
        cell: ({ row }) => (
          <span className="text-nowrap">
            {row.original.enrollmentStatus.name}
          </span>
        ),
      },
      {
        header: 'Ciclos Académicos',
        accessorKey: 'studyYears',
        enableSorting: false,
        cell: ({ row }) => (
          <div className="flex items-center justify-center">
            <ul>
              {row.original.studyYears.map(studyYear => (
                <li key={studyYear.id}>
                  <span>{studyYear.year}</span>
                </li>
              ))}
            </ul>
          </div>
        ),
      },
      {
        header: 'Estado',
        accessorKey: 'isActive',
        cell: ({ row }) => <StudentStatus isActive={row.original.isActive} />,
      },
      {
        header: 'Creado por',
        accessorKey: 'creatorName',
        enableSorting: false,
      },
      {
        header: 'Acciones',
        cell: ({ row }) => (
          <ActionButtons
            studentId={row.original.id}
            onChangePassword={onOpenChangePasswordModal}
            onDelete={onOpenDeleteModal}
          />
        ),
      },
    ],
    [],
  )