import Animator from "./Animator";
import Frame from "./Frame";
import { IObject } from "@daybrush/utils";
import { NameType, AnimateElement, AnimatorState, SceneItemState, SceneItemOptions, EasingType, PlayCondition, SceneItemEvents, SceneItemSelectorType } from "./types";
import OrderMap from "order-map";
import { InjectResult, StyledInjector } from "css-styled";
export declare function getEntries(times: number[], states: AnimatorState[]): number[][];
/**
* manage Frame Keyframes and play keyframes.
* @extends Animator
* @example
const item = new SceneItem({
    0: {
        display: "none",
    },
    1: {
        display: "block",
        opacity: 0,
    },
    2: {
        opacity: 1,
    }
});
*/
declare class SceneItem extends Animator<SceneItemOptions, SceneItemState, SceneItemEvents> {
    times: number[];
    items: IObject<Frame>;
    nameMap: OrderMap<string | number>;
    elements: AnimateElement[];
    styled: StyledInjector;
    styledInjector: InjectResult;
    temp: Frame;
    private needUpdate;
    private target;
    private targetFunc;
    private registeredElement;
    /**
      * @param - properties
      * @param - options
      * @example
      const item = new SceneItem({
          0: {
              display: "none",
          },
          1: {
              display: "block",
              opacity: 0,
          },
          2: {
              opacity: 1,
          }
      });
       */
    constructor(properties?: any, options?: Partial<SceneItemOptions>);
    getDuration(): number;
    /**
      * get size of list
      * @return {Number} length of list
      */
    size(): number;
    setDuration(duration: number): this;
    setId(id?: number | string): this;
    /**
      * Set properties to the sceneItem at that time
      * @param {Number} time - time
      * @param {...String|Object} [properties] - property names or values
      * @return {SceneItem} An instance itself
      * @example
  item.set(0, "a", "b") // item.getFrame(0).set("a", "b")
  console.log(item.get(0, "a")); // "b"
      */
    set(time: any, ...args: any[]): any;
    /**
      * Get properties of the sceneItem at that time
      * @param {Number} time - time
      * @param {...String|Object} args property's name or properties
      * @return {Number|String|PropertyObejct} property value
      * @example
  item.get(0, "a"); // item.getFrame(0).get("a");
  item.get(0, "transform", "translate"); // item.getFrame(0).get("transform", "translate");
      */
    get(time: string | number, ...args: NameType[]): any;
    /**
      * get properties orders
      * @param - property names
      * @example
      item.getOrders(["display"]) // => []
      item.getOrders(["transform"]) // => ["translate", "scale"]
      */
    getOrders(names: NameType[]): NameType[] | undefined;
    /**
      * set properties orders
      * @param - property names
      * @param - orders
      * @example
      item.getOrders(["transform"]) // => ["translate", "scale"]
      item.setOrders(["transform"], ["scale", "tralsate"])
      */
    setOrders(names: NameType[], orders: NameType[]): NameType[];
    /**
      * get properties order object
      * @example
      console.log(item.getOrderObject());
      */
    getOrderObject(): Record<string, (string | number)[]>;
    /**
      * set properties orders object
      * @param - properties orders object
      * @example
      item.setOrderObject({
          "": ["transform"],
          "transform": ["scale", "tralsate"],
      });
      */
    setOrderObject(obj: IObject<NameType[]>): void;
    remove(time: string | number, ...args: any[]): this;
    /**
      * Append the item or object at the last time.
      * @param - the scene item or item object
      * @return An instance itself
      * @example
  item.append(new SceneItem({
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  }));
  item.append({
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  });
  item.set(item.getDuration(), {
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  });
      */
    append(item: SceneItem | IObject<any>): this;
    /**
      * Push the front frames for the time and prepend the scene item or item object.
      * @param - the scene item or item object
      * @return An instance itself
      */
    prepend(item: SceneItem | IObject<any>): this;
    /**
     * Push out the amount of time.
     * @param - time to push
     * @example
   item.get(0); // frame 0
   item.unshift(3);
   item.get(3) // frame 0
     */
    unshift(time: number): this;
    /**
     * Get the frames in the item in object form.
     * @return {}
     * @example
 item.toObject();
 // {0: {display: "none"}, 1: {display: "block"}}
     */
    toObject(isStartZero?: boolean): IObject<Frame>;
    /**
     * Specifies an element to synchronize items' keyframes.
     * @param {string} selectors - Selectors to find elements in items.
     * @return {SceneItem} An instance itself
     * @example
item.setSelector("#id.class");
     */
    setSelector(target: SceneItemSelectorType): this;
    /**
     * Get the elements connected to SceneItem.
     */
    getElements(): AnimateElement[];
    /**
     * Specifies an element to synchronize item's keyframes.
     * @param - elements to synchronize item's keyframes.
     * @param - Make sure that you have peusdo.
     * @return {SceneItem} An instance itself
     * @example
item.setElement(document.querySelector("#id.class"));
item.setElement(document.querySelectorAll(".class"));
     */
    setElements(target: SceneItemSelectorType): this;
    /**
     * Specifies an element to synchronize item's keyframes.
     * @param - elements to synchronize item's keyframes.
     * @param - Make sure that you have peusdo.
     * @return {SceneItem} An instance itself
     * @example
item.setElement(document.querySelector("#id.class"));
item.setElement(document.querySelectorAll(".class"));
     */
    setElement(target: SceneItemSelectorType): this;
    setTarget(target: any): this;
    /**
      * add css styles of items's element to the frame at that time.
      * @param - Time to synchronize and set css
      * @param - elements to synchronize item's keyframes.
      * @return {SceneItem} An instance itself
      * @example
  item.setElement(document.querySelector("#id.class"));
  item.setCSS(0, ["opacity"]);
  item.setCSS(0, ["opacity", "width", "height"]);
      */
    setCSS(time: number, properties?: string[]): this;
    setTime(time: number | string, isTick?: boolean, isParent?: boolean, parentEasing?: EasingType): this;
    /**
      * update property names used in frames.
      * @return {SceneItem} An instance itself
      * @example
  item.update();
      */
    update(): this;
    /**
      * Create and add a frame to the sceneItem at that time
      * @param {Number} time - frame's time
      * @return {Frame} Created frame.
      * @example
  item.newFrame(time);
      */
    newFrame(time: string | number): Frame;
    /**
      * Add a frame to the sceneItem at that time
      * @param {Number} time - frame's time
      * @return {SceneItem} An instance itself
      * @example
  item.setFrame(time, frame);
      */
    setFrame(time: string | number, frame: Frame): this;
    getFrame(time: number | string, ...names: any[]): Frame;
    removeFrame(time: number | string, ...names: any[]): this;
    /**
      * check if the item has a frame at that time
      * @param {Number} time - frame's time
      * @return {Boolean} true: the item has a frame // false: not
      * @example
  if (item.hasFrame(10)) {
      // has
  } else {
      // not
  }
      */
    hasFrame(time: number | string): boolean;
    /**
      * Check if keyframes has propery's name
      * @param - property's time
      * @return {boolean} true: if has property, false: not
      * @example
    item.hasName(["transform", "translate"]); // true or not
      */
    hasName(args: string[]): boolean;
    /**
      * merge frame of the previous time at the next time.
    * @param - The time of the frame to merge
    * @param - The target frame
      * @return {SceneItem} An instance itself
      * @example
  // getFrame(1) contains getFrame(0)
  item.merge(0, 1);
      */
    mergeFrame(time: number | string, frame: Frame): this;
    /**
      * Get frame of the current time
      * @param {Number} time - the current time
      * @param {function} easing - the speed curve of an animation
      * @return {Frame} frame of the current time
      * @example
  let item = new SceneItem({
      0: {
          display: "none",
      },
      1: {
          display: "block",
          opacity: 0,
      },
      2: {
          opacity: 1,
      }
  });
  // opacity: 0.7; display:"block";
  const frame = item.getNowFrame(1.7);
      */
    getNowFrame(time: number, parentEasing?: EasingType, isAccurate?: boolean): Frame;
    /**
     * Get the current computed frame.
     * (If needUpdate is true, get a new computed frame, not the temp that has already been saved.)
     */
    getCurrentFrame(needUpdate?: boolean, parentEasing?: EasingType): Frame;
    /**
     * Get the computed frame corresponding to the time.
     */
    getComputedFrame(time: number, parentEasing?: EasingType, isAccurate?: boolean): Frame;
    load(properties?: any, options?: any): this;
    /**
       * clone SceneItem.
       * @return {SceneItem} An instance of clone
       * @example
       * item.clone();
       */
    clone(): SceneItem;
    /**
       * executes a provided function once for each scene item.
       * @param - Function to execute for each element, taking three arguments
       * @return {Keyframes} An instance itself
       */
    forEach(callback: (item: Frame, time: number, items: IObject<Frame>) => void): this;
    setOptions(options?: Partial<SceneItemOptions>): this;
    toCSS(playCondition?: PlayCondition, parentDuration?: number, states?: AnimatorState[]): string;
    /**
     * Export the CSS of the items to the style.
     * @param - Add a selector or className to play.
     * @return {SceneItem} An instance itself
     */
    exportCSS(playCondition?: PlayCondition, duration?: number, options?: AnimatorState[]): "" | this;
    pause(): this;
    pauseCSS(): this;
    endCSS(): this;
    end(): this;
    /**
      * Play using the css animation and keyframes.
      * @param - Check if you want to export css.
      * @param [playClassName="startAnimation"] - Add a class name to play.
      * @param - The shorthand properties for six of the animation properties.
      * @see {@link https://www.w3schools.com/cssref/css3_pr_animation.asp}
      * @example
  item.playCSS();
  item.playCSS(false, "startAnimation", {
      direction: "reverse",
      fillMode: "forwards",
  });
      */
    playCSS(isExportCSS?: boolean, playClassName?: string, properties?: object): this;
    getAnimationElement(): AnimateElement;
    addPlayClass(isPaused: boolean, playClassName?: string, properties?: object): AnimateElement;
    /**
      * Clear All Frames
      * @return {SceneItem} An instance itself
      */
    clear(): this;
    getNowValue(time: number, properties: NameType[], left?: number, right?: number, isAccurate?: boolean, easing?: EasingType, usePrevValue?: boolean): any;
    private _toKeyframes;
    private updateFrameOrders;
}
export default SceneItem;