import { useRouter } from 'next/router'

import cx from 'classnames'

import { slug as githubSlug } from 'github-slugger'

import { CheckIcon, XIcon } from '@primer/octicons-react'

import { HeadingLink } from '@/frame/components/article/HeadingLink'

import { useTranslation } from '@/languages/components/useTranslation'

import { Link } from '@/frame/components/Link'

import { MainContextT } from '@/frame/components/context/MainContext'

import {

AutomatedPageContext,

AutomatedPageContextT,

} from '@/automated-pipelines/components/AutomatedPageContext'

import { AutomatedPage } from '@/automated-pipelines/components/AutomatedPage'

import { RestRedirect } from '@/rest/components/RestRedirect'

import styles from '@/github-apps/components/PermissionTable.module.scss'

const IAT_DOCS_REF =

'/apps/creating-github-apps/authenticating-with-a-github-app/authenticating-as-a-github-app-installation'

const UAT_DOCS_REF =

'/apps/creating-github-apps/authenticating-with-a-github-app/authenticating-with-a-github-app-on-behalf-of-a-user'

type PermissionOperationsT = {

slug: string

category: string

subcategory: string

verb: string

requestPath: string

access: 'admin' | 'write' | 'read'

'user-to-server': boolean

'server-to-server': boolean

'additional-permissions': []

}

export type PermissionT = {

displayTitle: string

resourceGroup: string

permissions: PermissionOperationsT[]

}

export type PermissionListT = Record<string, PermissionT>

type Props = {

items: PermissionListT

currentVersion: string

categoriesWithoutSubcategories: string[]

mainContext: MainContextT

automatedPageContext: AutomatedPageContextT

tokenTypes?: boolean

}

export function PermissionsList({

items,

currentVersion,

categoriesWithoutSubcategories,

automatedPageContext,

mainContext,

tokenTypes = false,

}: Props) {

const { locale } = useRouter()

const DEFAULT_VERSION = mainContext.nonEnterpriseDefaultVersion

const rootPath =

currentVersion === DEFAULT_VERSION ? `/${locale}` : `/${locale}/${currentVersion}`

// Translated strings

const { t } = useTranslation('rest')

const ENDPOINTS_TH = t('rest.overview.permissions.endpoints')

const ACCESS_TH = t('rest.overview.permissions.access')

const TOKENS_TH = t('rest.overview.permissions.tokens')

const ADDITIONAL_TH = t('rest.overview.permissions.additionalPermissions')

const UAT = t('rest.overview.permissions.uat')

const IAT = t('rest.overview.permissions.iat')

const content = Object.entries(items).map(([permissionName, permissionObject]) => {

const { displayTitle, permissions } = permissionObject

const adminPermissions = permissions.filter((permission) => permission.access === 'admin')

const writePermissions = permissions.filter((permission) => permission.access === 'write')

const readPermissions = permissions.filter((permission) => permission.access === 'read')

const sortedPermissions = [...adminPermissions, ...writePermissions, ...readPermissions]

return (

<div key={permissionName} className={cx(styles.parameterTable)}>

<HeadingLink as="h2" slug={githubSlug(displayTitle)}>

{displayTitle}

</HeadingLink>

<table>

<thead>

<tr>

<th className="text-left">{ENDPOINTS_TH}</th>

<th className="text-center">{ACCESS_TH}</th>

{tokenTypes ? <th className="text-center">{TOKENS_TH}</th> : null}

<th className="text-center">{ADDITIONAL_TH}</th>

</tr>

</thead>

<tbody>

{sortedPermissions.map((operation, index) => {

const { slug, verb, requestPath } = operation

const category = categoriesWithoutSubcategories.includes(operation.category)

? `${operation.category}`

: `${operation.category}/${operation.subcategory}`

const opPath = `${rootPath}/rest/${category}#${slug}`

const iat = operation['server-to-server'] ? (

<span className="label mt-2">

<Link href={`${rootPath}${IAT_DOCS_REF}`}>{IAT}</Link>

</span>

) : null

const uat = operation['user-to-server'] ? (

<span className="label no-underline">

<Link href={`${rootPath}${UAT_DOCS_REF}`}>{UAT}</Link>

</span>

) : null

const permissionsClass = operation['additional-permissions'].length

? ''

: 'text-center'

return (

<tr key={`${permissionName}-${operation.slug}-${index}`}>

<td>

<Link href={`${opPath}`}>

<span>{verb.toUpperCase()}</span> {`${requestPath}`}

</Link>

</td>

<td className="v-align-middle text-center">{operation.access}</td>

{tokenTypes ? (

<td className="v-align-middle text-center">

{uat}

<br />

{iat}

</td>

) : null}

<td className={permissionsClass}>

{operation['additional-permissions'] ? (

<Link href={opPath} title={t('screen_reader_text_checkmark_icon')}>

<CheckIcon aria-hidden="true" />

<span className="visually-hidden">

{t('screen_reader_text_checkmark_icon')}

</span>

</Link>

) : (

<XIcon />

)}

</td>

</tr>

)

})}

</tbody>

</table>

</div>

)

})

return (

<AutomatedPageContext.Provider value={automatedPageContext}>

<RestRedirect />

<AutomatedPage>{content}</AutomatedPage>

</AutomatedPageContext.Provider>

)

}