import React from 'react'

import { type BasicAccessCheckProps } from './access-check-shared'
import { useAccessCheck } from './use-access-check'

type AccessCheckChildrenRenderFn = (params: BasicAccessCheckProps & { accessible: boolean }) => React.ReactNode

interface AccessCheckProps extends BasicAccessCheckProps {
  /**
   * Render prop that receives the access result.
   *
   * This component intentionally does NOT support a `fallback` prop to keep its
   * semantics as "check only" (boolean provider).
   */
  children: AccessCheckChildrenRenderFn
}

/**
 * Component-form access check that provides permission state via render prop.
 *
 * Use this when:
 * - Hooks are inconvenient (e.g. inside complex JSX composition)
 * - You only need the boolean result without conditional rendering
 * - You want to control rendering logic yourself
 *
 * For conditional show/hide, prefer `AccessGuard` instead.
 *
 * @example
 * // Control multiple elements based on access
 * <AccessCheck id="ClusterModifyGate" scopeProps={{ tidbId }}>
 *   {({ accessible }) => (
 *     <>
 *       <Button disabled={!accessible}>Edit</Button>
 *       <Text color={accessible ? 'green' : 'red'}>
 *         {accessible ? 'You can modify' : 'Read-only'}
 *       </Text>
 *     </>
 *   )}
 * </AccessCheck>
 *
 * @example
 * // Use in table columns or complex composition
 * const columns = [
 *   {
 *     render: (record) => (
 *       <AccessCheck id="OrgUsersAction">
 *         {({ accessible }) => (
 *           <ActionMenu disabled={!accessible} items={...} />
 *         )}
 *       </AccessCheck>
 *     )
 *   }
 * ]
 */
export const AccessCheck = ({ id, scopeProps, children }: AccessCheckProps) => {
  const accessible = useAccessCheck(id, scopeProps)

  return children({ id, scopeProps, accessible })
}