import { formatTimestamp } from '@/analyst/utilities'
import type { Column } from '@/components/Table/typing'
import {
  booleanSortingFunction,
  maybeSortingFunction,
  stringSortingFunction,
  timestampSortingFunction,
} from '@/components/Table/utils'
import Tags from '@/components/Tags'
import TickOrCross from '@/components/TickOrCross'
import { css } from '@emotion/css'
import type { User } from '@inject/graphql/fragment-types'
import type { Dispatch, SetStateAction } from 'react'

export const AUTH_GROUPS: User['group'][] = ['ADMIN', 'INSTRUCTOR', 'TRAINEE']

export type Filter<T> = {
  selected: T
  setSelected: Dispatch<SetStateAction<T>>
}

export type Active = { active: boolean; inactive: boolean }

export type UserColumn = Column<User>

export const USER_COLUMNS: UserColumn[] = [
  {
    id: 'id',
    name: 'ID',
    display: false,
    renderValue: (user: User) => user.id,
    sortingFunction: (a, b) => stringSortingFunction(a.id, b.id),
  },
  {
    id: 'username',
    name: 'Username',
    display: true,
    renderValue: (user: User) => user.username,
    sortingFunction: (a, b) => stringSortingFunction(a.username, b.username),
  },
  {
    id: 'firstName',
    name: 'First name',
    display: true,
    renderValue: (user: User) => user.firstName,
    sortingFunction: (a, b) =>
      maybeSortingFunction(a.firstName, b.firstName, stringSortingFunction),
  },
  {
    id: 'lastName',
    name: 'Last name',
    display: true,
    renderValue: (user: User) => user.lastName,
    sortingFunction: (a, b) =>
      maybeSortingFunction(a.lastName, b.lastName, stringSortingFunction),
  },
  {
    id: 'group',
    name: 'Group',
    display: true,
    renderValue: (user: User) => user.group,
    sortingFunction: (a, b) => stringSortingFunction(a.group, b.group),
  },
  {
    id: 'active',
    name: 'Active',
    display: true,
    valueClassName: () => css`
      text-align: center;
    `,
    renderValue: (user: User) => <TickOrCross value={user.isActive} />,
    sortingFunction: (a, b) => booleanSortingFunction(a.isActive, b.isActive),
  },
  {
    id: 'imported',
    name: 'Imported',
    display: false,
    renderValue: (user: User) => user.isImported,
    sortingFunction: (a, b) =>
      booleanSortingFunction(a.isImported, b.isImported),
  },
  {
    id: 'createdAt',
    name: 'Created at',
    display: false,
    renderValue: (user: User) => formatTimestamp(user.dateJoined),
    sortingFunction: (a, b) =>
      timestampSortingFunction(a.dateJoined, b.dateJoined),
  },
  {
    id: 'lastLogin',
    name: 'Last login',
    display: false,
    renderValue: (user: User) =>
      user.lastLogin ? formatTimestamp(user.lastLogin) : null,
    sortingFunction: (a, b) =>
      maybeSortingFunction(a.lastLogin, b.lastLogin, timestampSortingFunction),
  },
  {
    id: 'tags',
    name: 'Tags',
    display: true,
    renderValue: (user: User) => (
      <Tags tagsArray={user.tags.map(tag => tag.name)} />
    ),
    sortingFunction: (a, b) =>
      stringSortingFunction(
        a.tags.map(tag => tag.name).join(', '),
        b.tags.map(tag => tag.name).join(', ')
      ),
  },
]
