import React from "react";
import type { TagSize } from "../../core/Tag/Tag.types";
/**
 * A single suggestion item displayed in the mention dropdown.
 */
export interface MentionSuggestion {
    /** Unique identifier for the suggestion */
    id: string;
    /** Display label (e.g. user name, tag name) */
    label: string;
    /** Optional avatar URL */
    avatar?: string;
    /** Optional description line (e.g. job title, email) */
    description?: string;
    /** Allow arbitrary metadata */
    [key: string]: unknown;
}
/**
 * Rich mention data returned via onMentionsChange.
 */
export interface MentionData {
    /** Unique identifier */
    id: string;
    /** Display label */
    label: string;
    /** The trigger character used (e.g. '@', '#') */
    trigger: string;
    /** Optional avatar URL */
    avatar?: string;
}
/**
 * A text segment in the content model.
 */
export interface TextSegment {
    type: "text";
    text: string;
}
/**
 * A mention segment in the content model.
 */
export interface MentionSegment {
    type: "mention";
    data: MentionData;
}
/**
 * A content segment is either text or a mention.
 */
export type ContentSegment = TextSegment | MentionSegment;
/**
 * Configuration for a single trigger character and its suggestions.
 */
export interface MentionTrigger {
    /** The trigger character (e.g. '@', '#') */
    trigger: string;
    /** Available suggestions for this trigger */
    suggestions: MentionSuggestion[];
    /** Async search callback invoked when the user types after the trigger */
    onSearch?: (query: string) => void | Promise<void>;
}
/**
 * Size variants for the Mention component.
 */
export type MentionSize = "sm" | "md" | "lg";
/**
 * Theme configuration for the Mention component.
 */
export interface MentionTheme {
    /** Outermost wrapper style */
    wrapperStyle: string;
    /** Input group container style (border, focus ring) */
    inputGroupStyle: string;
    /** JS-driven focus ring style */
    inputGroupFocusStyle: string;
    /** Base editable div style */
    editableStyle: string;
    /** Size variants for the editable div */
    sizes: Record<MentionSize, string>;
    /** Inline mention Tag chip style */
    mentionTagStyle: string;
    /** Dropdown container style */
    dropdownStyle: string;
    /** Individual suggestion item style */
    suggestionStyle: string;
    /** Highlighted (keyboard-focused) suggestion style */
    suggestionHighlightedStyle: string;
    /** Avatar style inside a suggestion */
    suggestionAvatarStyle: string;
    /** Avatar fallback (initials) style */
    suggestionAvatarFallbackStyle: string;
    /** Suggestion label text style */
    suggestionLabelStyle: string;
    /** Suggestion description text style */
    suggestionDescriptionStyle: string;
    /** Empty state message style */
    emptyMessageStyle: string;
    /** Loading state style */
    loadingStyle: string;
}
/**
 * Partial theme overrides for the Mention component.
 */
export type MentionThemeOverrides = Partial<MentionTheme>;
/**
 * Props for the Mention component.
 */
export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
    /** Multiple trigger configurations (e.g. '@' for users, '#' for tags) */
    triggers?: MentionTrigger[];
    /** Simple API: suggestions for the default '@' trigger */
    suggestions?: MentionSuggestion[];
    /** Simple API: async search callback for the default '@' trigger */
    onSearch?: (query: string) => void;
    /** Controlled value (plain text with trigger+label for mentions) */
    value?: string;
    /** Uncontrolled default value */
    defaultValue?: string;
    /** Change callback with the full text value */
    onChange?: (value: string) => void;
    /** Callback when a suggestion is selected */
    onMentionSelect?: (suggestion: MentionSuggestion, trigger: string) => void;
    /** Callback with current mention data whenever mentions change */
    onMentionsChange?: (mentions: MentionData[]) => void;
    /** Placeholder text */
    placeholder?: string;
    /** Size variant */
    size?: MentionSize;
    /** Maximum number of suggestions shown */
    maxSuggestions?: number;
    /** Additional className for the editable div */
    className?: string;
    /** Additional className for the wrapper */
    wrapperClassName?: string;
    /** Additional className for the dropdown */
    dropdownClassName?: string;
    /** Theme overrides */
    theme?: MentionThemeOverrides;
    /** Whether the mention input is disabled */
    disabled?: boolean;
    /** Custom renderer for suggestion items */
    renderSuggestion?: (suggestion: MentionSuggestion, isHighlighted: boolean, trigger: string) => React.ReactNode;
    /** Message shown when no suggestions match */
    emptyMessage?: string;
    /** Whether a search is currently loading */
    loading?: boolean;
    /** Size of the inline mention Tag chips */
    mentionTagSize?: TagSize;
    /** Additional className for inline mention Tag chips */
    mentionTagClassName?: string;
    /** Number of visible text rows (controls min-height) */
    rows?: number;
}
