import { annotate } from '@markput/core';
import type { ComponentType } from 'react';
import type { CoreMarkputProps } from '@markput/core';
import type { CoreOption } from '@markput/core';
import type { CSSProperties } from 'react';
import { denote } from '@markput/core';
import type { DependencyList } from 'react';
import type { ElementType } from 'react';
import type { EventKey } from '@markput/core';
import type { ForwardedRef } from 'react';
import type { HTMLAttributes } from 'react';
import type { Listener } from '@markput/core';
import { MarkToken } from '@markput/core';
import { Markup } from '@markput/core';
import type { OverlayMatch } from '@markput/core';
import type { OverlayTrigger } from '@markput/core';
import type { ReactNode } from 'react';
import type { RefObject } from 'react';
import type { Store } from '@markput/core';
import { TextToken } from '@markput/core';
import { Token } from '@markput/core';

export { annotate }

/**
 * Data attributes with automatic camelCase to kebab-case conversion
 */
declare type DataAttributes = Record<`data${Capitalize<string>}`, string | number | boolean | undefined>;

export { denote }

/**
 * @function
 */
export declare const MarkedInput: MarkedInputComponent;

export declare interface MarkedInputComponent {
    <TMarkProps = MarkProps, TOverlayProps = OverlayProps>(props: MarkedInputProps<TMarkProps, TOverlayProps>): JSX.Element | null;
    displayName?: string;
}

export declare interface MarkedInputHandler {
    /** Container element */
    readonly container: HTMLDivElement | null;
    /** Overlay element if exists */
    readonly overlay: HTMLElement | null;
    focus(): void;
}

/**
 * Props for MarkedInput component.
 *
 * @template TMarkProps - Type of props for the global Mark component
 * @template TOverlayProps - Type of props for the global Overlay component
 *
 * @example
 * ```typescript
 * <MarkedInput<ChipProps>
 *   Mark={Chip}
 *   options={[{
 *     markup: '@[__value__]',
 *     mark: { label: 'Click me' }
 *   }]}
 * />
 * ```
 */
export declare interface MarkedInputProps<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreMarkputProps {
    /** Ref to handler */
    ref?: ForwardedRef<MarkedInputHandler>;
    /** Global component used for rendering markups (fallback for option.mark.slot) */
    Mark?: ComponentType<TMarkProps>;
    /** Global component used for rendering overlays (fallback for option.overlay.slot) */
    Overlay?: ComponentType<TOverlayProps>;
    /**
     * Configuration options for markups and overlays.
     * Each option can specify its own slot component via mark.slot or overlay.slot.
     * Falls back to global Mark/Overlay components when not specified.
     */
    options?: Option_2<TMarkProps, TOverlayProps>[];
    /** Additional classes */
    className?: string;
    /** Additional style */
    style?: CSSProperties;
    /**
     * Override internal components using slots
     * @example
     * slots={{ container: 'div', span: 'span' }}
     */
    slots?: Slots;
    /**
     * Props to pass to slot components
     * @example
     * slotProps={{ container: { onKeyDown: handler }, span: { className: 'custom' } }}
     */
    slotProps?: SlotProps;
    /**
     * Events that trigger overlay display
     * @default 'change'
     */
    showOverlayOn?: OverlayTrigger;
}

export declare class MarkHandler<T extends HTMLElement = HTMLElement> {
    #private;
    readonly ref: RefObject<T>;
    readOnly?: boolean;
    constructor(param: {
        ref: RefObject<T>;
        store: Store;
        token: MarkToken;
    });
    /** Displayed text of the mark */
    get content(): string;
    set content(value: string);
    /** Data value associated with the mark */
    get value(): string | undefined;
    set value(value: string | undefined);
    /** Optional metadata for the mark */
    get meta(): string | undefined;
    set meta(value: string | undefined);
    /** Nesting depth (0 for root-level marks) */
    get depth(): number;
    /** Whether this mark has nested children */
    get hasChildren(): boolean;
    /** Parent mark token (undefined for root-level marks) */
    get parent(): MarkToken | undefined;
    /** Child tokens of this mark */
    get tokens(): Token[];
    /** Update multiple properties in a single operation */
    change: (props: {
        content: string;
        value?: string;
        meta?: string;
    }) => void;
    /** Delete this mark from the editor */
    remove: () => void;
}

declare interface MarkOptions {
    /**
     * @default false
     */
    controlled?: boolean;
}

/**
 * Props passed to Mark components.
 */
export declare interface MarkProps {
    /** Custom component to render this mark */
    slot?: ComponentType<MarkProps>;
    /** Main content value of the mark */
    value?: string;
    /** Additional metadata for the mark */
    meta?: string;
    /** Nested content as string (raw, unparsed) */
    nested?: string;
    /** Rendered children content (ReactNode) for nested marks */
    children?: ReactNode;
}

export { MarkToken }

export { Markup }

/**
 * React-specific markup option for defining mark behavior and styling.
 *
 * @template TMarkProps - Type of props for the mark component
 * @template TOverlayProps - Type of props for the overlay component
 *
 * @example
 * const option: Option<ChipProps> = {
 *   markup: '@[__value__]',
 *   mark: { slot: Chip, label: 'Click' }
 * }
 */
declare interface Option_2<TMarkProps = MarkProps, TOverlayProps = OverlayProps> extends CoreOption {
    /**
     * Props for the mark component.
     * Can be a static object or a function that transforms MarkProps.
     */
    mark?: TMarkProps | ((props: MarkProps) => TMarkProps);
    /**
     * Props for the overlay component.
     */
    overlay?: TOverlayProps;
}
export { Option_2 as Option }

export declare interface OverlayHandler {
    /**
     * Style with caret absolute position. Used for placing an overlay.
     */
    style: {
        left: number;
        top: number;
    };
    /**
     * Used for close overlay.
     */
    close: () => void;
    /**
     * Used for insert an annotation instead a triggered value.
     */
    select: (value: {
        value: string;
        meta?: string;
    }) => void;
    /**
     * Overlay match details
     */
    match: OverlayMatch<Option_2>;
    ref: RefObject<HTMLElement>;
}

/**
 * Props for Overlay components.
 */
export declare interface OverlayProps {
    /** Custom component to render this overlay */
    slot?: ComponentType<OverlayProps>;
    /** Trigger character(s) that activate the overlay */
    trigger?: string;
    /** Data array for suggestions/autocomplete */
    data?: string[];
}

/**
 * Props for each slot component
 */
declare interface SlotProps {
    /** Props to pass to the container slot */
    container?: HTMLAttributes<HTMLDivElement> & DataAttributes;
    /** Props to pass to the span slot */
    span?: HTMLAttributes<HTMLSpanElement> & DataAttributes;
}

/**
 * Available slots for customizing MarkedInput internal components
 */
declare interface Slots {
    /** Root container component */
    container?: ElementType<HTMLAttributes<HTMLDivElement>>;
    /** Text span component for rendering text tokens */
    span?: ElementType<HTMLAttributes<HTMLSpanElement>>;
}

export { TextToken }

export { Token }

export declare function useListener<T>(key: EventKey<T>, listener: Listener<T>, deps?: DependencyList): void;

export declare function useListener<K extends keyof HTMLElementEventMap>(key: K, listener: Listener<HTMLElementEventMap[K]>, deps?: DependencyList): void;

export declare const useMark: <T extends HTMLElement = HTMLElement>(options?: MarkOptions) => MarkHandler<T>;

export declare function useOverlay(): OverlayHandler;

export { }