/**
 * Used in the editor for the InteractiveGraph widget.
 */
import { Changeable } from "@khanacademy/perseus";
import * as React from "react";
import type { APIOptionsWithDefaults } from "@khanacademy/perseus";
import type { AxisLabelLocation, ShowAxisArrows, ShowAxisTicks, MarkingsType, PerseusImageBackground } from "@khanacademy/perseus-core";
type ChangeFn = typeof Changeable.change;
type Range = [min: number, max: number];
interface Props {
    /**
     * The size of the graph area in pixels.
     */
    box: [x: number, y: number];
    /**
     * The labels for the x and y axes.
     */
    labels: ReadonlyArray<string>;
    /**
     * Specifies the location of the labels on the graph.  default: "onAxis".
     * - "onAxis": Labels are positioned on the axis at the right (x) and top (y) of the graph.
     * - "alongEdge": Labels are centered along the bottom (x) and left (y) edges of the graph.
     *    The y label is rotated. Typically used when the range min is near 0 with longer labels.
     */
    labelLocation: AxisLabelLocation;
    /**
     * The range of the graph.
     */
    range: [x: Range, y: Range];
    /**
     * Whether the graph is bounded (no axis arrows) on the x and y axes.
     */
    showAxisArrows: ShowAxisArrows;
    /**
     * Whether to show tick marks and tick numbers per axis.
     */
    showAxisTicks: ShowAxisTicks;
    /**
     * How far apart the tick marks on the axes are in the x and y
     * directions.
     */
    step: [x: number, y: number];
    /**
     * How far apart the grid lines are in the x and y directions.
     */
    gridStep: [x: number, y: number];
    /**
     * How far apart the snap-to points are in the x and y directions.
     */
    snapStep: [x: number, y: number];
    /**
     * An error message to display in the graph area, or true if the
     * graph is valid.
     */
    valid: true | string;
    /**
     * The background image to display in the graph area and its properties.
     */
    backgroundImage: PerseusImageBackground;
    /**
     * The type of markings to display on the graph.
     * - axes: shows the axes without the gride lines
     * - graph: shows the axes and the grid lines
     * - grid: shows only the grid lines
     * - none: shows no markings
     */
    markings: MarkingsType;
    /**
     * Whether to show the protractor on the graph.
     */
    showProtractor: boolean;
    /**
     * Whether to show tooltips on the graph.
     */
    showTooltips: boolean;
    onChange: (arg1: Partial<Props>) => void;
    apiOptions: APIOptionsWithDefaults;
}
interface State {
    isExpanded: boolean;
    labelsTextbox: ReadonlyArray<string>;
    labelLocation: AxisLabelLocation;
    gridStepTextbox: [x: number, y: number];
    snapStepTextbox: [x: number, y: number];
    stepTextbox: [x: number, y: number];
    rangeTextbox: [x: Range, y: Range];
    showAxisArrowsSwitches: ShowAxisArrows;
    showAxisTicksSwitches: ShowAxisTicks;
    backgroundImage: PerseusImageBackground;
}
declare class InteractiveGraphSettings extends React.Component<Props, State> {
    _isMounted: boolean;
    bgUrlRef: React.RefObject<HTMLInputElement>;
    labelXRef: React.RefObject<HTMLInputElement>;
    labelYRef: React.RefObject<HTMLInputElement>;
    static stateFromProps(props: Props): {
        labelsTextbox: readonly string[];
        labelLocation: AxisLabelLocation;
        gridStepTextbox: [x: number, y: number];
        snapStepTextbox: [x: number, y: number];
        stepTextbox: [x: number, y: number];
        rangeTextbox: [x: Range, y: Range];
        showAxisArrowsSwitches: ShowAxisArrows;
        showAxisTicksSwitches: ShowAxisTicks;
        backgroundImage: {
            url?: string | null;
            width?: number;
            height?: number;
            top?: number;
            left?: number;
            scale?: number;
            bottom?: number;
        };
    };
    constructor(props: Props);
    static defaultProps: {
        box: 288[];
        labels: string[];
        labelLocation: string;
        range: number[][];
        step: number[];
        gridStep: number[];
        snapStep: number[];
        valid: boolean;
        backgroundImage: {
            readonly url: null;
            readonly width: 0;
            readonly height: 0;
        };
        markings: string;
        showProtractor: boolean;
        showTooltips: boolean;
        showAxisArrows: {
            xMin: boolean;
            xMax: boolean;
            yMin: boolean;
            yMax: boolean;
        };
        showAxisTicks: {
            x: boolean;
            y: boolean;
        };
    };
    componentDidMount(): void;
    UNSAFE_componentWillReceiveProps(nextProps: any): void;
    componentWillUnmount(): void;
    change: ChangeFn;
    changeBackgroundUrl: (e: any) => void;
    renderLabelChoices: (choices: any) => any;
    validRange: (range: any) => true | "Range must be a valid number" | "Range must have a higher number on the right";
    validateStepValue: (settings: any) => string | true;
    validSnapStep: (step: any, range: any) => string | true;
    validGridStep: (step: any, range: any) => string | true;
    validStep: (step: any, range: any) => string | true;
    validBackgroundImageSize: (image: any) => true | "Image must be smaller than 450px x 450px.";
    validateGraphSettings: (range: any, step: any, gridStep: any, snapStep: any, image: any) => any;
    changeLabel: (i: any, e: any) => void;
    changeRange: (i: any, values: any) => void;
    changeShowAxisArrows: (axis: keyof ShowAxisArrows) => void;
    changeShowAxisTicks: (axis: keyof ShowAxisTicks) => void;
    changeStepsBasedOnRange: () => void;
    changeStep: (step: any) => void;
    changeSnapStep: (snapStep: any) => void;
    changeGridStep: (gridStep: any) => void;
    changeGraph: () => void;
    render(): React.JSX.Element;
}
export default InteractiveGraphSettings;
