import { ActionIcon, Box, Button, Flex, Menu, Typography } from '@tidbcloud/uikit'
import { MRT_ColumnDef, ProTable } from '@tidbcloud/uikit/biz'
import { IconDotsHorizontal, IconPlus } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useState } from 'react'

import { useListBearerTokens } from 'dbaas/services/account'
import { CentralBearerToken } from 'dbaas/services/account/interface'
import useStores from 'dbaas/stores/useStores'

import { TokenCreationModal } from './CreationModal'
import DeletionConfirm from './DeletionConfirm'
import { EditModal } from './EditModal'
import { ViewModal } from './ViewModal'

export const SCMIToken = observer(() => {
  const {
    store: { tenantData }
  } = useStores()
  const pageSize = 5
  const [page, setPage] = useState(1)
  const [editToken, setEditToken] = useState<CentralBearerToken | null>(null)
  const [deleteToken, setDeleteToken] = useState<CentralBearerToken | null>(null)

  const columns: MRT_ColumnDef<CentralBearerToken>[] = [
    {
      header: 'Token ID',
      accessorKey: 'public_key',
      size: 100,
      accessorFn: (row) => {
        return <ViewModal trigger={<a data-mp-event="View SCIM Bear Token Details">{row.public_key}</a>} data={row} />
      }
    },
    {
      header: 'Description',
      accessorKey: 'description',
      size: 200
    },
    {
      header: 'Actions',
      size: 10,
      accessorFn(row) {
        return (
          <Menu>
            <Menu.Target>
              <ActionIcon size={24} variant="subtle" data-mp-event="SCIM  Bearer Token Actions Clicked">
                <IconDotsHorizontal size={12} />
              </ActionIcon>
            </Menu.Target>
            <Menu.Dropdown>
              <Menu.Item
                onClick={() => {
                  setEditToken(row)
                }}
              >
                Edit
              </Menu.Item>
              <Menu.Item
                onClick={() => {
                  setDeleteToken(row)
                }}
              >
                Delete
              </Menu.Item>
            </Menu.Dropdown>
          </Menu>
        )
      }
    }
  ]

  const { data, refetch, isLoading } = useListBearerTokens(
    tenantData.id,
    {
      page,
      per_page: pageSize
    },
    {
      query: {
        refetchInterval: false,
        refetchOnWindowFocus: false
      }
    }
  )

  return (
    <Box mt="sm">
      <Flex align="center" justify="space-between" mb="xs">
        <Typography variant="body-sm">Bearer token is used to connect 3rd party IdP to TiDB Cloud.</Typography>
        <TokenCreationModal
          trigger={
            <Button size="xs" leftSection={<IconPlus />} data-mp-event="New SCIM Bearer Token Button Clicked">
              New
            </Button>
          }
          onFinish={() => {
            setPage(1)
            refetch()
          }}
        />
      </Flex>
      <ProTable
        columns={columns}
        loading={isLoading}
        mantineTableProps={{ verticalSpacing: 4 }}
        mantineTableBodyCellProps={{ h: 40 }}
        data={data?.items || []}
        manualPagination={true}
        pagination={
          data && data.total
            ? {
                total: Math.ceil((data?.total || 0) / pageSize),
                value: page,
                onChange(page) {
                  setPage(page)
                },
                size: 'xs'
              }
            : undefined
        }
      />
      {!!editToken && (
        <EditModal
          orgId={tenantData.id}
          visible={true}
          onFinish={refetch}
          data={editToken}
          onClose={() => {
            setEditToken(null)
          }}
        />
      )}
      {!!deleteToken && (
        <DeletionConfirm
          orgId={tenantData.id}
          visible={true}
          onConfirm={() => {
            if ((data?.total || 0) - 1 <= pageSize * (page - 1)) {
              setPage(1)
            }
            return refetch()
          }}
          data={deleteToken!}
          onClose={() => {
            setDeleteToken(null)
          }}
        />
      )}
    </Box>
  )
})