import { CommentData, CommentBody, BaseMetadata, InboxNotificationData, InboxNotificationThreadData, InboxNotificationCustomData, ThreadData } from '@liveblocks/core';
import React, { ReactNode, ComponentPropsWithoutRef, MouseEvent, ComponentType, FormEvent, RefAttributes, ComponentProps, PropsWithChildren } from 'react';

declare type Direction = "ltr" | "rtl";
declare type SlotProp = {
    /**
     * Replace the rendered element by the one passed as a child.
     */
    asChild?: boolean;
};
declare type ThreadMetadata = {
    resolved?: boolean;
};

interface LocalizationOverrides {
    locale: string;
    dir: Direction;
}
interface GlobalOverrides {
    USER_SELF: string;
    USER_UNKNOWN: string;
    LIST_REMAINING: (count: number) => string;
    LIST_REMAINING_USERS: (count: number) => string;
    LIST_REMAINING_COMMENTS: (count: number) => string;
    EMOJI_PICKER_SEARCH_PLACEHOLDER: string;
    EMOJI_PICKER_EMPTY: ReactNode;
    EMOJI_PICKER_ERROR: (error: Error) => ReactNode;
}
interface CommentOverrides {
    COMMENT_EDITED: ReactNode;
    COMMENT_DELETED: ReactNode;
    COMMENT_MORE: string;
    COMMENT_EDIT: string;
    COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;
    COMMENT_EDIT_COMPOSER_CANCEL: string;
    COMMENT_EDIT_COMPOSER_SAVE: string;
    COMMENT_DELETE: string;
    COMMENT_ADD_REACTION: string;
    COMMENT_REACTION_LIST: (list: ReactNode, emoji: string, count: number) => ReactNode;
    COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;
}
interface ComposerOverrides {
    COMPOSER_INSERT_MENTION: string;
    COMPOSER_INSERT_EMOJI: string;
    COMPOSER_PLACEHOLDER: string;
    COMPOSER_SEND: string;
}
interface ThreadOverrides {
    THREAD_RESOLVE: string;
    THREAD_UNRESOLVE: string;
    THREAD_NEW_INDICATOR: string;
    THREAD_NEW_INDICATOR_DESCRIPTION: string;
    THREAD_COMPOSER_PLACEHOLDER: string;
    THREAD_COMPOSER_SEND: string;
}
interface InboxNotificationOverrides {
    INBOX_NOTIFICATION_MORE: string;
    INBOX_NOTIFICATION_MARK_AS_READ: string;
    INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (list: ReactNode, room: ReactNode | undefined, count: number) => ReactNode;
    INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode | undefined) => ReactNode;
}
declare type Overrides = LocalizationOverrides & GlobalOverrides & ComposerOverrides & CommentOverrides & ThreadOverrides & InboxNotificationOverrides;

interface CommentProps extends ComponentPropsWithoutRef<"div"> {
    /**
     * The comment to display.
     */
    comment: CommentData;
    /**
     * How to show or hide the actions.
     */
    showActions?: boolean | "hover";
    /**
     * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
     */
    showDeleted?: boolean;
    /**
     * Whether to show reactions.
     */
    showReactions?: boolean;
    /**
     * Whether to indent the comment's content.
     */
    indentContent?: boolean;
    /**
     * The event handler called when the comment is edited.
     */
    onCommentEdit?: (comment: CommentData) => void;
    /**
     * The event handler called when the comment is deleted.
     */
    onCommentDelete?: (comment: CommentData) => void;
    /**
     * The event handler called when clicking on the author.
     */
    onAuthorClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
    /**
     * The event handler called when clicking on a mention.
     */
    onMentionClick?: (userId: string, event: MouseEvent<HTMLElement>) => void;
    /**
     * Override the component's strings.
     */
    overrides?: Partial<GlobalOverrides & CommentOverrides & ComposerOverrides>;
}
/**
 * Displays a single comment.
 *
 * @example
 * <>
 *   {thread.comments.map((comment) => (
 *     <Comment key={comment.id} comment={comment} />
 *   ))}
 * </>
 */
declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLDivElement>>;

interface ComposerEditorMentionProps {
    /**
     * Whether the mention is selected.
     */
    isSelected: boolean;
    /**
     * The mention's user ID.
     */
    userId: string;
}
interface ComposerEditorLinkProps {
    /**
     * The link's absolute URL.
     *
     * @example "https://example.com"
     */
    href: string;
    /**
     * The link's content.
     *
     * @example "www.example.com", "a link", etc.
     */
    children: ReactNode;
}
declare type ComposerEditorMentionSuggestionsProps = {
    /**
     * The list of suggested user IDs.
     */
    userIds: string[];
    /**
     * The currently selected user ID.
     */
    selectedUserId?: string;
};
interface ComposerEditorComponents {
    /**
     * The component used to display mentions.
     */
    Mention: ComponentType<ComposerEditorMentionProps>;
    /**
     * The component used to display mention suggestions.
     */
    MentionSuggestions: ComponentType<ComposerEditorMentionSuggestionsProps>;
    /**
     * The component used to display links.
     */
    Link: ComponentType<ComposerEditorLinkProps>;
}
interface ComposerEditorProps extends Omit<ComponentPropsWithoutRef<"div">, "defaultValue"> {
    /**
     * The reading direction of the editor and related elements.
     */
    dir?: Direction;
    /**
     * The editor's initial value.
     */
    defaultValue?: CommentBody;
    /**
     * The text to display when the editor is empty.
     */
    placeholder?: string;
    /**
     * Whether the editor is disabled.
     */
    disabled?: boolean;
    /**
     * Whether to focus the editor on mount.
     */
    autoFocus?: boolean;
    /**
     * The components displayed within the editor.
     */
    components?: Partial<ComposerEditorComponents>;
}
interface ComposerSubmitComment {
    /**
     * The submitted comment's body.
     */
    body: CommentBody;
}

declare type ComposerCreateThreadProps<TThreadMetadata extends BaseMetadata> = {
    threadId?: never;
    commentId?: never;
    /**
     * The metadata of the thread to create.
     */
    metadata?: TThreadMetadata;
};
declare type ComposerCreateCommentProps = {
    /**
     * The ID of the thread to reply to.
     */
    threadId: string;
    commentId?: never;
    metadata?: never;
};
declare type ComposerEditCommentProps = {
    /**
     * The ID of the thread to edit a comment in.
     */
    threadId: string;
    /**
     * The ID of the comment to edit.
     */
    commentId: string;
    metadata?: never;
};
declare type ComposerProps<TThreadMetadata extends BaseMetadata = ThreadMetadata> = Omit<ComponentPropsWithoutRef<"form">, "defaultValue"> & (ComposerCreateThreadProps<TThreadMetadata> | ComposerCreateCommentProps | ComposerEditCommentProps) & {
    /**
     * The event handler called when the composer is submitted.
     */
    onComposerSubmit?: (comment: ComposerSubmitComment, event: FormEvent<HTMLFormElement>) => Promise<void> | void;
    /**
     * The composer's initial value.
     */
    defaultValue?: ComposerEditorProps["defaultValue"];
    /**
     * Whether the composer is collapsed. Setting a value will make the composer controlled.
     */
    collapsed?: boolean;
    /**
     * The event handler called when the collapsed state of the composer changes.
     */
    onCollapsedChange?: (collapsed: boolean) => void;
    /**
     * Whether the composer is initially collapsed. Setting a value will make the composer uncontrolled.
     */
    defaultCollapsed?: boolean;
    /**
     * Whether the composer is disabled.
     */
    disabled?: ComposerEditorProps["disabled"];
    /**
     * Whether to focus the composer on mount.
     */
    autoFocus?: ComposerEditorProps["autoFocus"];
    /**
     * Override the component's strings.
     */
    overrides?: Partial<GlobalOverrides & ComposerOverrides>;
};
/**
 * Displays a composer to create comments.
 *
 * @example
 * <Composer />
 */
declare const Composer: <TThreadMetadata extends BaseMetadata = ThreadMetadata>(props: ComposerProps<TThreadMetadata> & RefAttributes<HTMLFormElement>) => JSX.Element;

interface GlobalComponents {
    Anchor: ComponentType<ComponentPropsWithoutRef<"a">> | "a";
}
declare type Components = GlobalComponents;

interface AvatarProps extends ComponentProps<"div"> {
    /**
     * The user ID to display the avatar for.
     */
    userId: string;
}

declare type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
declare type ComponentTypeWithRef<T extends keyof JSX.IntrinsicElements, P> = ComponentType<P & Pick<ComponentProps<T>, "ref">>;
declare type InboxNotificationKinds = Record<`$${string}`, ComponentTypeWithRef<"a", Optional<InboxNotificationCustomProps, "title" | "children">>> & {
    thread: ComponentTypeWithRef<"a", InboxNotificationThreadProps>;
};
interface InboxNotificationSharedProps {
    /**
     * How to show or hide the actions.
     */
    showActions?: boolean | "hover";
}
interface InboxNotificationProps extends Omit<ComponentPropsWithoutRef<"a">, "title">, InboxNotificationSharedProps {
    /**
     * The inbox notification to display.
     */
    inboxNotification: InboxNotificationData;
    /**
     * Override specific kinds of inbox notifications.
     */
    kinds?: Partial<InboxNotificationKinds>;
    /**
     * Override the component's strings.
     */
    overrides?: Partial<GlobalOverrides & InboxNotificationOverrides & CommentOverrides>;
    /**
     * Override the component's components.
     */
    components?: Partial<GlobalComponents>;
}
interface InboxNotificationThreadProps extends Omit<InboxNotificationProps, "kinds" | "children">, InboxNotificationSharedProps {
    /**
     * The inbox notification to display.
     */
    inboxNotification: InboxNotificationThreadData;
    /**
     * Whether to show the room name in the title.
     */
    showRoomName?: boolean;
}
interface InboxNotificationCustomProps extends Omit<InboxNotificationProps, "kinds">, InboxNotificationSharedProps, SlotProp {
    /**
     * The inbox notification to display.
     */
    inboxNotification: InboxNotificationCustomData;
    /**
     * The inbox notification's content.
     */
    children: ReactNode;
    /**
     * The inbox notification's title.
     */
    title: ReactNode;
    /**
     * The inbox notification's aside content.
     * Can be combined with `InboxNotification.Icon` or `InboxNotification.Avatar` to easily follow default styles.
     */
    aside?: ReactNode;
    /**
     * Whether to mark the inbox notification as read when clicked.
     */
    markAsReadOnClick?: boolean;
}
declare type InboxNotificationIconProps = ComponentProps<"div">;
declare type InboxNotificationAvatarProps = AvatarProps;
declare function InboxNotificationIcon({ className, ...props }: InboxNotificationIconProps): React.JSX.Element;
declare function InboxNotificationAvatar({ className, ...props }: InboxNotificationAvatarProps): React.JSX.Element;
/**
 * Displays a single inbox notification.
 *
 * @example
 * <>
 *   {inboxNotifications.map((inboxNotification) => (
 *     <InboxNotification
 *       key={inboxNotification.id}
 *       inboxNotification={inboxNotification}
 *       href={`/rooms/${inboxNotification.roomId}`
 *     />
 *   ))}
 * </>
 */
declare const InboxNotification: React.ForwardRefExoticComponent<InboxNotificationProps & React.RefAttributes<HTMLAnchorElement>> & {
    Thread: React.ForwardRefExoticComponent<InboxNotificationThreadProps & React.RefAttributes<HTMLAnchorElement>>;
    Custom: React.ForwardRefExoticComponent<InboxNotificationCustomProps & React.RefAttributes<HTMLAnchorElement>>;
    Icon: typeof InboxNotificationIcon;
    Avatar: typeof InboxNotificationAvatar;
};

declare type InboxNotificationListProps = ComponentPropsWithoutRef<"ol">;
/**
 * Displays inbox notifications as a list.
 *
 * @example
 * <InboxNotificationList>
 *   {inboxNotifications.map((inboxNotification) => (
 *     <InboxNotification key={inboxNotification.id} inboxNotification={inboxNotification} />
 *   ))}
 * </InboxNotificationList>
 */
declare const InboxNotificationList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;

interface ThreadProps<TThreadMetadata extends BaseMetadata = ThreadMetadata> extends ComponentPropsWithoutRef<"div"> {
    /**
     * The thread to display.
     */
    thread: ThreadData<TThreadMetadata>;
    /**
     * How to show or hide the composer to reply to the thread.
     */
    showComposer?: boolean | "collapsed";
    /**
     * Whether to show the action to resolve the thread.
     */
    showResolveAction?: boolean;
    /**
     * How to show or hide the actions.
     */
    showActions?: CommentProps["showActions"];
    /**
     * Whether to show reactions.
     */
    showReactions?: CommentProps["showReactions"];
    /**
     * Whether to indent the comments' content.
     */
    indentCommentContent?: CommentProps["indentContent"];
    /**
     * Whether to show deleted comments.
     */
    showDeletedComments?: CommentProps["showDeleted"];
    /**
     * The event handler called when changing the resolved status.
     */
    onResolvedChange?: (resolved: boolean) => void;
    /**
     * The event handler called when a comment is edited.
     */
    onCommentEdit?: CommentProps["onCommentEdit"];
    /**
     * The event handler called when a comment is deleted.
     */
    onCommentDelete?: CommentProps["onCommentDelete"];
    /**
     * The event handler called when the thread is deleted.
     * A thread is deleted when all its comments are deleted.
     */
    onThreadDelete?: (thread: ThreadData<TThreadMetadata>) => void;
    /**
     * The event handler called when clicking on a comment's author.
     */
    onAuthorClick?: CommentProps["onAuthorClick"];
    /**
     * The event handler called when clicking on a mention.
     */
    onMentionClick?: CommentProps["onMentionClick"];
    /**
     * Override the component's strings.
     */
    overrides?: Partial<GlobalOverrides & ThreadOverrides & CommentOverrides & ComposerOverrides>;
}
/**
 * Displays a thread of comments, with a composer to reply
 * to it.
 *
 * @example
 * <>
 *   {threads.map((thread) => (
 *     <Thread key={thread.id} thread={thread} />
 *   ))}
 * </>
 */
declare const Thread: <TThreadMetadata extends BaseMetadata = ThreadMetadata>(props: ThreadProps<TThreadMetadata> & RefAttributes<HTMLDivElement>) => JSX.Element;

declare type CommentsConfigProps = PropsWithChildren<{
    /**
     * Override the components' strings.
     */
    overrides?: Partial<Overrides>;
    /**
     * Override the components' components.
     */
    components?: Partial<Components>;
    /**
     * The container to render the portal into.
     */
    portalContainer?: HTMLElement;
}>;
/**
 * Set configuration options for all Comments components.
 *
 * @example
 * <CommentsConfig overrides={{ locale: "fr", USER_UNKNOWN: "Anonyme", ... }}>
 *   <App />
 * </CommentsConfig>
 */
declare function CommentsConfig({ overrides, components, portalContainer, children, }: CommentsConfigProps): React.JSX.Element;

export { Comment, CommentProps, CommentsConfig, Composer, ComposerProps, ComposerSubmitComment, InboxNotification, InboxNotificationAvatarProps, InboxNotificationCustomProps, InboxNotificationIconProps, InboxNotificationList, InboxNotificationListProps, InboxNotificationProps, InboxNotificationThreadProps, Thread, ThreadProps };