import Vnmf from '../../index'

declare module '../../index' {
  namespace createAnimation {
    interface Option {
      /** Animation duration，Units ms */
      duration?: number
      /** Animation effects */
      timingFunction?: keyof TimingFunction
      /** Animation delay，Units ms
       * @default 0
       */
      delay?: number
      /** @default "50% 50% 0" */
      transformOrigin?: string
      /**
       * Units
       * @supported h5
       */
      unit?: string
    }
    interface TimingFunction {
      /** Animated at the same speed from beginning to end. */
      linear
      /** Animation begins at low speed.，And speed it up.，Slow down before it's over. */
      ease
      /** Animation begins at low speed. */
      'ease-in'
      /** Animation begins and ends at low speed. */
      'ease-in-out'
      /** Animation ends at low speed. */
      'ease-out'
      /** The first animated frame jumps to the end of state until end. */
      'step-start'
      /** Animation stays in motion.，The last frame jumps to the end state. */
      'step-end'
    }
  }

  /** Animated Object
   * @supported weapp, h5, tt
   * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.html
   */
  interface Animation {
    /** Export Animation Queue。**export Every time the method is called, it clears previous animation.**。
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.export.html
     */
    export(): {
      actions: VnmfGeneral.IAnyObject[]
    }
    /** A set of animations is complete.。You can call any number of animation methods in a set animations.，All the animations in a set of will start at same time.，The next one's animated until it's finished.。
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.step.html
     */
    step(option?: Animation.StepOption): Animation
    /** Same. [transform-function matrix](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix)
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix.html
     */
    matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): Animation
    /** Same. [transform-function matrix3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d)
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.matrix3d.html
     */
    matrix3d(a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number): Animation
    /** Rotate one angle from the original clockwise
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate.html
     */
    rotate(
      /** The angle of the rotation。Scope [-180, 180] */
      angle: number,
    ): Animation
    /** From Fixed Axis clockwise rotates an angle
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotate3d.html
     */
    rotate3d(
      /** Rotating Axis x Coordinates */
      x: number,
      /** Rotating Axis y Coordinates */
      y?: number,
      /** Rotating Axis z Coordinates */
      z?: number,
      /** The angle of the rotation。Scope [-180, 180] */
      angle?: number,
    ): Animation
    /** From X Axis clockwise rotates an angle
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateX.html
     */
    rotateX(
      /** The angle of the rotation。Scope [-180, 180] */
      angle: number,
    ): Animation
    /** From Y Axis clockwise rotates an angle
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateY.html
     */
    rotateY(
      /** The angle of the rotation。Scope [-180, 180] */
      angle: number,
    ): Animation
    /** From Z Axis clockwise rotates an angle
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.rotateZ.html
     */
    rotateZ(
      /** The angle of the rotation。Scope [-180, 180] */
      angle: number,
    ): Animation
    /** Zoom
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale.html
     */
    scale(
      /** ♪ When only sx Parameter Time，# Sayin' on X Axis、Y Axis scale at the same timesxMultiplier */
      sx: number,
      /** Yes. Y Axis Scale sy Multiplier */
      sy?: number,
    ): Animation
    /** Zoom
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scale3d.html
     */
    scale3d(
      /** x Multipliers of Axis */
      sx: number,
      /** y Multipliers of Axis */
      sy: number,
      /** z Multipliers of Axis */
      sz: number,
    ): Animation
    /** Zoom X Axis
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleX.html
     */
    scaleX(
      /** X Multipliers of Axis */
      scale: number,
    ): Animation
    /** Zoom Y Axis
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleY.html
     */
    scaleY(
      /** Y Multipliers of Axis */
      scale: number,
    ): Animation
    /** Zoom Z Axis
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.scaleZ.html
     */
    scaleZ(
      /** Z Multipliers of Axis */
      scale: number,
    ): Animation
    /** Yeah. X、Y Axis coordinates tilt.
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skew.html
     */
    skew(
      /** Yeah. X Axis coordinates tilt angle，Scope [-180, 180] */
      ax: number,
      /** Yeah. Y Axis coordinates tilt angle，Scope [-180, 180] */
      ay: number,
    ): Animation
    /** Yeah. X Axis coordinates tilt.
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewX.html
     */
    skewX(
      /** Tilt Angle，Scope [-180, 180] */
      angle: number,
    ): Animation
    /** Yeah. Y Axis coordinates tilt.
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.skewY.html
     */
    skewY(
      /** Tilt Angle，Scope [-180, 180] */
      angle: number,
    ): Animation
    /** Equalisation Variation
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate.html
     */
    translate(
      /** Express in when only this parameter is available X Axis Offset tx，Units px */
      tx?: number,
      /** Yes. Y Distance of Axis Moved，Units px */
      ty?: number,
    ): Animation
    /** Yeah. xyz Coordinates for transposition.
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translate3d.html
     */
    translate3d(
      /** Yes. X Distance of Axis Moved，Units px */
      tx?: number,
      /** Yes. Y Distance of Axis Moved，Units px */
      ty?: number,
      /** Yes. Z Distance of Axis Moved，Units px */
      tz?: number,
    ): Animation
    /** Yeah. X Axis Migration
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateX.html
     */
    translateX(
      /** Yes. X Distance of Axis Moved，Units px */
      translation: number,
    ): Animation
    /** Yeah. Y Axis Migration
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateY.html
     */
    translateY(
      /** Yes. Y Distance of Axis Moved，Units px */
      translation: number,
    ): Animation
    /** Yeah. Z Axis Migration
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.translateZ.html
     */
    translateZ(
      /** Yes. Z Distance of Axis Moved，Units px */
      translation: number,
    ): Animation
    /** Set Transparency
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.opacity.html
     */
    opacity(
      /** Transparency，Scope 0-1 */
      value: number,
    ): Animation
    /** Set background color
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.backgroundColor.html
     */
    backgroundColor(
      /** Colour Value */
      value: string,
    ): Animation
    /** Set Width
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.width.html
     */
    width(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
    /** Set Height
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.height.html
     */
    height(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
    /** Settings left Value
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.left.html
     */
    left(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
    /** Settings right Value
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.right.html
     */
    right(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
    /** Settings top Value
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.top.html
     */
    top(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
    /** Settings bottom Value
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/Animation.bottom.html
     */
    bottom(
      /** Length value，If it's in, number and use by default px，Length values that can be passed into other custom units */
      value: number | string,
    ): Animation
  }

  namespace Animation {
    interface StepOption {
      /** Animation delay，Units ms */
      delay?: number
      /** Animation duration，Units ms */
      duration?: number
      /** Animation effects */
      timingFunction?: keyof TimingFunction
      transformOrigin?: string
    }
    interface TimingFunction {
      /** Animated at the same speed from beginning to end. */
      linear
      /** Animation begins at low speed.，And speed it up.，Slow down before it's over. */
      ease
      /** Animation begins at low speed. */
      'ease-in'
      /** Animation begins and ends at low speed. */
      'ease-in-out'
      /** Animation ends at low speed. */
      'ease-out'
      /** The first animated frame jumps to the end of state until end. */
      'step-start'
      /** Animation stays in motion.，The last frame jumps to the end state. */
      'step-end'
    }
  }

  /** @ignore */
  interface KeyFrame {
    /** Offset of the key frame，Scope[0-1] */
    offset?: number
    /** Animation buffer function */
    ease?: string
    /** Base Point Position，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform-origin */
    transformOrigin?: string
    /** Background Colour，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS background-color */
    backgroundColor?: string
    /** Bottom Position，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS bottom */
    bottom?: number | string
    /** Height，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS height */
    height?: number | string
    /** Left position，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS left */
    left?: number | string
    /** Width，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS width */
    width?: number | string
    /** Opacity，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS opacity */
    opacity?: number | string
    /** Right position.，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS right */
    right?: number | string
    /** Top Position，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS top */
    top?: number | string
    /** Transform Matrix，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform matrix */
    matrix?: number[]
    /** 3D Variation Matrix，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform matrix3d */
    matrix3d?: number[]
    /** Rotate，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform rotate */
    rotate?: number
    /** 3D Rotation，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform rotate3d */
    rotate3d?: number[]
    /** X Rotate，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform rotateX */
    rotateX?: number
    /** Y Rotate，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform rotateY */
    rotateY?: number
    /** Z Rotate，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform rotateZ */
    rotateZ?: number
    /** Zoom，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform scale */
    scale?: number[]
    /** 3D Scale，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform scale3d */
    scale3d?: number[]
    /** X Zoom，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform scaleX */
    scaleX?: number
    /** Y Zoom，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform scaleY */
    scaleY?: number
    /** Z Zoom，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform scaleZ */
    scaleZ?: number
    /** Slant，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform skew */
    skew?: number[]
    /** X Tilt，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform skewX */
    skewX?: number
    /** Y Tilt，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform skewY */
    skewY?: number
    /** Offset，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform translate */
    translate?: Array<number | string>
    /** 3D Offset，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform translate3d */
    translate3d?: Array<number | string>
    /** X Shift orientation，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform translateX */
    translateX?: number | string
    /** Y Shift orientation，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform translateY */
    translateY?: number | string
    /** Z Shift orientation，i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i-i CSS transform translateZ */
    translateZ?: number | string
    composite?: 'replace' | 'add' | 'accumulate' | 'auto'
    easing?: string
    [property: string]: any
  }

  /** @ignore */
  type ClearAnimationOptions = Record<keyof KeyFrame, boolean>

  /** @ignore */
  interface ScrollTimelineOption {
    /** Specifies the selection of rolling elements（Support only scroll-view），This element will drive the animated progress as it rolls */
    scrollSource: string
    /** Specify Scroll Direction。Valid value is horizontal or vertical */
    orientation?: string
    /** Specifies the rolling offset to start driving animation progress，Units px */
    startScrollOffset: number
    /** Specifies a rolling offset to stop driving the animation progress，Units px */
    endScrollOffset: number
    /** Length of the rolling range map starting and ending，That's the time to spend with key frame animation. (duration) Match，Units ms */
    timeRange: number
  }

  interface VnmfStatic {
    /** Create animated example [animation](../Animation)。Call example to describe animation。And finally, with animated examples, export Method to export animated data components animation Properties。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * var animation = Vnmf.createAnimation({
     *   transformOrigin: "50% 50%",
     *   duration: 1000,
     *   timingFunction: "ease",
     *   delay: 0
     * })
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
     */
    createAnimation(option: createAnimation.Option): Animation
  }
}