import { Flex, Typography, Loader, Center, useComputedColorScheme, Box } from '@tidbcloud/uikit'
import { IconInbox01 } from '@tidbcloud/uikit/icons'

import { useGetOauthApplications } from 'dbaas/services/oauth2'

import { AppCard } from './AppCard'

export const EmptyOAuth: React.FC<React.PropsWithChildren<{ withBackground?: boolean }>> = ({
  withBackground = false
}) => {
  return (
    <Flex
      w={withBackground ? '100%' : 464}
      align="center"
      direction="column"
      sx={(theme) =>
        withBackground
          ? {
              backgroundColor: theme.colors.carbon[2],
              border: `1px solid ${theme.colors.carbon[4]}`,
              borderRadius: theme.defaultRadius,
              padding: 24
            }
          : {}
      }
    >
      <IconInbox01 size={32} c="carbon.7" />
      <Typography variant="headline-lg" mt={4} ta="center">
        No Authorized OAuth Application
      </Typography>
      <Typography variant="body-lg" mt={4} ta="center" mb={0}>
        You have no applications authorized to access your account.
      </Typography>
    </Flex>
  )
}

export const OAuthApps = () => {
  const { data, isLoading } = useGetOauthApplications()
  const colorScheme = useComputedColorScheme()
  const authorizedApps = data?.applications?.filter((t) => t.authorized) || []
  const unauthorizedApps = data?.applications?.filter((t) => !t.authorized) || []

  const hasAuthorized = !!authorizedApps.length
  const hasRecommend = !!unauthorizedApps.length

  const empty = !hasAuthorized && !hasRecommend

  const appsNum = authorizedApps.length ? (
    <Typography variant="action-lg" display="inline-block" fz={14} c="carbon.9">
      {authorizedApps.length} APP{authorizedApps.length > 1 ? 's' : ''}
    </Typography>
  ) : (
    <>0 APP</>
  )

  const Elm = isLoading ? (
    <Center>
      <Loader mt={48} />
    </Center>
  ) : (
    <>
      {(hasAuthorized || hasRecommend) && (
        <>
          <Typography variant="action-lg" c="carbon.7" fz={14} mb={24}>
            Authorized OAuth Applications: {appsNum}
          </Typography>
          {hasAuthorized ? (
            <Flex direction="column" gap={24}>
              {authorizedApps.map((app, index) => {
                return <AppCard key={index.toString()} data={app} />
              })}
            </Flex>
          ) : (
            <EmptyOAuth withBackground />
          )}
        </>
      )}
      {hasRecommend && (
        <>
          <Typography variant="action-lg" c="carbon.7" fz={14} my={24}>
            Other Integrated Authorized OAuth Applications you can authorize
          </Typography>
          <Flex direction="column" gap={24}>
            {unauthorizedApps.map((app, index) => {
              return <AppCard key={index.toString()} data={app} />
            })}
          </Flex>
        </>
      )}
      {empty && (
        <Flex justify="center" h="100%" align="center">
          <EmptyOAuth />
        </Flex>
      )}
    </>
  )

  return (
    <Box
      sx={(theme) => ({
        paddingTop: 24,
        height: '100%',
        display: empty ? 'flex' : undefined,
        flexDirection: empty ? 'column' : undefined,
        background: colorScheme === 'dark' ? undefined : theme.colors.carbon[1]
      })}
    >
      {Elm}
    </Box>
  )
}