import React, { CSSProperties } from 'react';
import { RDKitColor } from '@iktos-oss/rdkit-provider';
import { DisplayZoomToolbarStrings } from '../Zoom';
import { ClickableAtoms, BondIdentifiers, AttachedSvgIcon, AtomsStyles, BondsStyles } from '../../utils';
export type MoleculeRepresentationProps = SmilesRepresentationProps | SmartsRepresentationProps;
export declare const MoleculeRepresentation: React.FC<MoleculeRepresentationProps>;
export default MoleculeRepresentation;
interface MoleculeRepresentationBaseProps {
    addAtomIndices?: boolean;
    highlightColor?: RDKitColor;
    atomsToHighlight?: number[][];
    bondsToHighlight?: number[][];
    attachedSvgIcons?: AttachedSvgIcon[];
    clickableAtoms?: ClickableAtoms;
    details?: Record<string, unknown>;
    height: number;
    id?: string;
    onAtomClick?: (atomId: string, event: React.MouseEvent) => void;
    onBondClick?: (clickedBondIdentifiers: BondIdentifiers, event: React.MouseEvent) => void;
    onMouseHover?: ({ atomId, bondIdentifiers }: {
        atomId?: string;
        bondIdentifiers?: BondIdentifiers;
    }, event: React.MouseEvent) => void;
    onMouseLeave?: (event: React.MouseEvent) => void;
    style?: CSSProperties;
    showLoadingSpinner?: boolean;
    showSmartsAsSmiles?: boolean;
    width: number;
    /** Zoomable molecule with meta key + mouse wheel or toolbar */
    zoomable?: boolean;
    displayZoomToolbar?: DisplayZoomToolbarStrings;
    heatmapAtomsWeights?: Record<number, number>;
    atomsStyles?: AtomsStyles;
    bondsStyles?: BondsStyles;
    canonicalize?: boolean;
}
interface SmilesRepresentationProps extends MoleculeRepresentationBaseProps {
    smarts?: never;
    smiles: string;
    alignmentDetails?: AlignmentDetails;
}
interface SmartsRepresentationProps extends MoleculeRepresentationBaseProps {
    smarts: string;
    smiles?: never;
    alignmentDetails?: never;
}
export interface AlignmentDetails {
    molBlock: string;
    highlightColor?: RDKitColor;
}