import { Button, HoverCard } from '@tidbcloud/uikit'

import { AccessGuard } from 'dbaas/contexts/access-control'
import type { AccessIdType } from 'dbaas/contexts/access-control/types'

interface CreateActionGuardProps {
  projectId: string
  permissionMessage: string
  projectAccessId?: AccessIdType
  orgAccessId?: AccessIdType
  children: React.ReactNode
}

export function CreateActionGuard({
  projectId,
  permissionMessage,
  projectAccessId = 'TidbxCreateInProject',
  orgAccessId = 'TidbxCreateInVirtualProject',
  children
}: CreateActionGuardProps) {
  const fallback = (
    <HoverCard withArrow withinPortal>
      <HoverCard.Target>
        <span style={{ flexGrow: 1 }}>
          <Button disabled fullWidth>
            Create
          </Button>
        </span>
      </HoverCard.Target>
      <HoverCard.Dropdown maw={320}>{permissionMessage}</HoverCard.Dropdown>
    </HoverCard>
  )

  if (projectId) {
    return (
      <AccessGuard id={projectAccessId} scopeProps={{ projectId }} fallback={fallback}>
        {children}
      </AccessGuard>
    )
  }

  return (
    <AccessGuard id={orgAccessId} fallback={fallback}>
      {children}
    </AccessGuard>
  )
}