import { UPDATE_PRIORITY, PointData, Container, ContainerOptions } from '@drincs/pixi-vn/pixi.js';

interface TickerArgs {
}

interface Ticker<TArgs extends TickerArgs> {
    /**
     * Arguments to pass to the ticker
     */
    args: TArgs;
    /**
     * Duration in seconds to run the ticker
     */
    duration?: number;
    /**
     * Priority of the ticker
     */
    priority?: UPDATE_PRIORITY;
    /**
     * Get the alias of the ticker class. This variable is used in the system to get the ticker class by id, {@link RegisteredTickers.getInstance}
     */
    readonly alias: string;
    /**
     * The id of the ticker. Must be unique for each ticker instance.
     */
    readonly id: string;
    /**
     * The aliases of the canvas elements that are connected to this ticker
     */
    canvasElementAliases: string[];
    /**
     * Completes the animation and applies the final state.
     */
    complete: (options?: {
        ignoreTickerSteps?: boolean;
    }) => Promise<void> | void;
    /**
     * Stops the animation at its current state, and prevents it from resuming when the animation is played again.
     */
    stop: () => void;
    /**
     * Starts the ticker. This will start the ticker and begin the animation.
     */
    start: () => void;
    /**
     * Pauses the animation.
     */
    pause: () => void;
    /**
     * Plays the animation.
     */
    play: () => void;
    /**
     * Checks if the ticker is paused.
     * @returns true if the ticker is paused, false otherwise.
     */
    readonly paused: boolean;
}

/**
 * TickerHistory is a class that contains the name of a class and the arguments that were used to create it.
 */
interface TickerInfo<TArgs extends TickerArgs> {
    /**
     * If this ticker was created by steps
     */
    createdByTicketSteps?: {
        canvasElementAlias: string;
        id: string;
    };
    ticker: Ticker<TArgs>;
}
interface TickerHistory<TArgs extends TickerArgs> {
    id: string;
    args: TArgs;
    /**
     * The aliases of the canvas elements that are connected to this ticker
     */
    canvasElementAliases: string[];
    priority?: UPDATE_PRIORITY;
    duration?: number;
    paused?: boolean;
}

interface TickersStep<TArgs extends TickerArgs> {
    /**
     * Ticker class name
     */
    ticker: string;
    /**
     * Duration in seconds. If is undefined, the step will end only when the animation is finished.
     */
    duration?: number;
    /**
     * Arguments to pass to the ticker
     */
    args: TArgs;
    /**
     * Priority of the ticker
     */
    priority?: UPDATE_PRIORITY;
}
/**
 * The steps of the tickers
 */
interface TickersSequence {
    /**
     * The step number
     */
    currentStepNumber: number;
    /**
     * The steps of the tickers
     */
    steps: TickersStep<any>[];
}

/**
 * This class is used to create a canvas element to add into a Pixi Application.
 * You can use {@link canvas.add()} to add this element into the application.
 * This class should be implemented and the memory method should be overridden.
 * You must use the {@link canvasComponentDecorator} to register the canvas in the game.
 * In Ren'Py is a displayable.
 * @example
 * ```ts
 * const CANVAS_EXAMPLE_ID = "CanvasExample";
 *
 * \@canvasComponentDecorator({
 *     name: CANVAS_EXAMPLE_ID,
 * })
 * export class CanvasExample extends Container implements CanvasBaseItem<Memory> {
 *     get memory(): Memory {
 *         return {
 *             pixivnId: CANVAS_EXAMPLE_ID,
 *             // ... other properties
 *         }
 *     }
 *     async setMemory(value: Memory) {
 *         // ... set other properties
 *     }
 * }
 * ```
 */
declare class CanvasBaseItem<T2 extends CanvasBaseItemMemory> {
    constructor(..._options: any);
    /**
     * This method return the memory of the canvas element.
     * @throws {PixiError} when the method is not overridden in the subclass.
     */
    get memory(): T2;
    /**
     * This method set the memory of the canvas element.
     * @throws {PixiError} when the method is not overridden in the subclass.
     */
    setMemory(_value: T2): Promise<void> | void;
    /**
     * Get the id of the canvas element. This variable is used in the system to get the canvas element by id
     */
    pixivnId: string;
}

/**
 * Interface for the canvas base memory
 */
interface CanvasBaseItemMemory {
    pixivnId: string;
    /**
     * The index of the container in its parent, if it has one
     */
    index?: number;
    /**
     * The label of the parent container, if it has one
     */
    parentLabel?: string;
    label?: string;
    zIndex?: number;
}

/**
 * Interface exported canvas
 */
interface CanvasGameState {
    tickers: {
        [id: string]: TickerHistory<any>;
    };
    tickersSteps: {
        [alias: string]: {
            [tickerId: string]: TickersSequence;
        };
    };
    elements: {
        [alias: string]: CanvasBaseItemMemory;
    };
    stage: Partial<ContainerMemory>;
    /**
     * @deprecated
     */
    elementAliasesOrder: string[];
    tickersToCompleteOnStepEnd: {
        tikersIds: {
            id: string;
        }[];
        stepAlias: {
            id: string;
            alias: string;
        }[];
    };
}

interface AdditionalPositionsExtensionProps {
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    align?: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    xAlign?: number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    yAlign?: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentagePosition?: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageX?: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageY?: number;
}
interface AdditionalPositionsExtension {
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    align: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    xAlign: number;
    /**
     * is a way to set the position of the element in the canvas. compared to position, align, it is a percentage used to determine the proximity from the edges of the canvas.
     * For example:
     * - if you set align to 0.5, the element will be in the center of the canvas.
     * - if you set align to 0, the left end and a top end of the element will be in the left end and top end of the canvas.
     * - if you set align to 1, the right end and a bottom end of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does not affect the alignment.
     */
    yAlign: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentagePosition: Partial<PointData> | number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageX: number;
    /**
     * is a way to set the position of the element in the canvas calculated in percentage.
     * For example, if you set the {@link PixiContainer.pivot} to 0.5, and:
     * - if you set percentagePosition to 0.5, the element will be in the center of the canvas.
     * - If you set percentagePosition to 0, the center of the element will be in the left end and top end of the canvas.
     * - If you set percentagePosition to 1, the center of the element will be in the right end and bottom end of the canvas.
     *
     * **Important:** The {@link PixiContainer.pivot} field does affect the percentagePosition.
     */
    percentageY: number;
    readonly positionType: "pixel" | "percentage" | "align";
    readonly positionInfo: {
        x: number;
        y: number;
        type: "pixel" | "percentage" | "align";
    };
}
declare function analizePositionsExtensionProps<T extends AdditionalPositionsExtensionProps>(props?: T): T | undefined;

type ContainerChild = Container & CanvasBaseItem<any>;

interface ListenerExtensionMemory {
    onEvents?: OnEventsHandlers;
}
interface OnEventsHandlers {
    [name: string]: string;
}
interface ListenerExtension {
    /**
     * Add a listener for a given event.
     * @example
     * ```ts
     * export class Events {
     *     \@eventDecorator()
     *     static eventExample(event: FederatedEvent, component: Sprite) {
     *         // event code here
     *     }
     * }
     *
     * sprite.on("pointerdown", Events.eventExample);
     * ```
     */
    on: Container["on"];
    readonly onEventsHandlers: OnEventsHandlers;
}
declare function addListenerHandler<T extends ListenerExtension>(event: symbol | string, element: T, fn: (...args: never[]) => unknown): boolean;

/**
 * Interface for the canvas container memory
 */
interface ContainerMemory<C extends ContainerChild = ContainerChild> extends ContainerOptions<C>, CanvasBaseItemMemory, ListenerExtensionMemory, AdditionalPositionsExtensionProps {
    /**
     * The elements contained in this container
     */
    elements: CanvasBaseItemMemory[];
}

export { type AdditionalPositionsExtensionProps as A, type CanvasBaseItemMemory as C, type ListenerExtensionMemory as L, type OnEventsHandlers as O, type TickerArgs as T, type Ticker as a, CanvasBaseItem as b, type TickerInfo as c, type TickersSequence as d, type CanvasGameState as e, type ContainerChild as f, type ListenerExtension as g, type AdditionalPositionsExtension as h, type ContainerMemory as i, type TickerHistory as j, addListenerHandler as k, analizePositionsExtensionProps as l };