import { Table } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import dayjs from 'dayjs'

import { useGetProjectUsers } from '../../../../apiClient/services/devops'
import { AccountcliUser } from '../../../../apiClient/services/devops/interface'

import { RBACRoleUINames, RBACRolesValues } from './contants'
import { DeleteUser } from './DeleteUser'

export const ProjectUsers: React.FC<
  React.PropsWithChildren<{
    orgId: string
    orgName: string
    projectId: string
    projectName: string
    search?: string
    currentPage: number
    showFullEmail: boolean
    onPageChange?: (page: number, pageSize?: number) => void
  }>
> = ({
  orgId,
  search = '',
  projectId,
  currentPage,
  onPageChange,
  orgName,
  projectName,
  showFullEmail
}) => {
  const columns: ColumnsType<AccountcliUser> = [
    {
      title: 'User',
      render(value, record, index) {
        return `${record.first_name} ${record.last_name}`
      }
    },
    {
      title: 'Email',
      dataIndex: 'email'
    },
    {
      title: 'Role',
      dataIndex: 'role',
      render(value: RBACRolesValues) {
        return RBACRoleUINames[value]
      }
    },
    {
      title: 'Invite Time',
      render(value, record) {
        return dayjs((record.invite_time?.seconds || 0) * 1000).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }
    },
    {
      title: 'Status',
      dataIndex: 'status'
    },
    {
      title: 'Last login Time',
      render(value, record) {
        if (!record.login_time) {
          return record.status === 'ACTIVE' ? '-' : 'Has not logged in yet'
        }
        return dayjs((record.login_time?.seconds || 0) * 1000).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      }
    },
    {
      title: 'Actions',
      render(value, record) {
        return (
          <DeleteUser
            type="project"
            orgId={orgId}
            userId={record.id || ''}
            projectId={projectId}
            orgName={orgName}
            projectName={projectName}
            email={record.email || ''}
          />
        )
      }
    }
  ]
  const pageSize = 10

  const { data, isLoading } = useGetProjectUsers(
    orgId,
    projectId,
    {
      search: search,
      page: currentPage,
      page_size: pageSize,
      full_email: showFullEmail
    },
    {
      query: {
        enabled: !!projectId && !!projectId,
        refetchInterval: false,
        refetchOnWindowFocus: false
      }
    }
  )

  return (
    <>
      <Table
        columns={columns}
        loading={isLoading}
        dataSource={data?.data.items || []}
        pagination={{
          total: data?.data.total || 0,
          current: currentPage,
          pageSize: pageSize,
          onChange: onPageChange,
          showSizeChanger: false
        }}
      ></Table>
    </>
  )
}