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

declare module '../../index' {
  namespace createIntersectionObserver {
    /** Options */
    interface Option {
      /** Initial intersection ratio，If the intersection ratio detected on call is not equal to this value and reaches threshold，and triggers the echo function of a listening device。 */
      initialRatio?: number
      /** Whether multiple target nodes are observed at the same time（Not one.），If set true ，observe It's... it's... targetSelector Several Nodes will be selected（Attention.：Selecting too many nodes at the same time will affect rendering performance.） */
      observeAll?: boolean
      /** A numeric array，Include all thresholds。 */
      thresholds?: number[]
    }
  }

  /** `IntersectionObserver` Object，Use to extrapolate whether certain nodes can be seen by the user、What's the percentage you can be seen by user?。
   * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html
   */
  interface IntersectionObserver {
    /** Stop listening.。The echo function will no longer trigger.
     * @supported weapp, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.disconnect.html
     */
    disconnect(): void
    /** Specify target node and start listening to interlocking state changes
     * @supported weapp, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.observe.html
     */
    observe(
      /** Selector */
      targetSelector: string,
      /** A echo function to listen changes in the intersection status */
      callback: IntersectionObserver.ObserveCallback,
    ): void
    /** Specify a node with the Selector，As one of the reference areas。
     * @supported weapp, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.relativeTo.html
     */
    relativeTo(
      /** Selector */
      selector: string,
      /** For extension（Or shrink.）Border of the area node layout by reference */
      margins?: IntersectionObserver.RelativeToMargins,
    ): IntersectionObserver
    /** Specifies a page display area as one of the reference areas
     * @supported weapp, tt
     * @example
     * In the following example code:，If the target node（Use Selector .target-class Assign）Enter below display area 100px Hour，It triggers the echo function.。
     *
     * ```tsx
     * Vnmf.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
     *   res.intersectionRatio // Concurrent area as a proportion of the layout target node
     *   res.intersectionRect // Intersection
     *   res.intersectionRect.left // Coordinates of the left boundary conjoining area
     *   res.intersectionRect.top // Upper boundary coordinates of the area intersection
     *   res.intersectionRect.width // Width of the intersection area
     *   res.intersectionRect.height // Height of the intersection area
     * })
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.relativeToViewport.html
     */
    relativeToViewport(
      /** For extension（Or shrink.）Border of the area node layout by reference */
      margins?: IntersectionObserver.RelativeToViewportMargins,
    ): IntersectionObserver
  }

  namespace IntersectionObserver {
    /** A echo function to listen changes in the intersection status */
    type ObserveCallback = (result: ObserveCallbackResult) => void
    interface ObserveCallbackResult {
      /** Target boundary */
      boundingClientRect: BoundingClientRectResult
      /** Intersection Ratio */
      intersectionRatio: number
      /** Boundary of the conjoined area */
      intersectionRect: IntersectionRectResult
      /** Borders of the reference area */
      relativeRect: RelativeRectResult
      /** Time stamp at intersection detection */
      time: number
    }
    /** Borders of the reference area */
    interface RelativeRectResult {
      /** Lower border. */
      bottom: number
      /** Left boundary */
      left: number
      /** Right Boundary */
      right: number
      /** Upper border */
      top: number
    }
    /** Boundary of the conjoined area */
    interface IntersectionRectResult {
      /** Lower border. */
      bottom: number
      /** Height */
      height: number
      /** Left boundary */
      left: number
      /** Right Boundary */
      right: number
      /** Upper border */
      top: number
      /** Width */
      width: number
    }
    /** Target boundary */
    interface BoundingClientRectResult {
      /** Lower border. */
      bottom: number
      /** Height */
      height: number
      /** Left boundary */
      left: number
      /** Right Boundary */
      right: number
      /** Upper border */
      top: number
      /** Width */
      width: number
    }
    /** For extension（Or shrink.）Border of the area node layout by reference */
    interface RelativeToMargins {
      /** Lower boundary of node layout area */
      bottom?: number
      /** Left boundary of node layout area */
      left?: number
      /** Right boundary of node layout area */
      right?: number
      /** Upper boundary of node layout area */
      top?: number
    }
    /** For extension（Or shrink.）Border of the area node layout by reference */
    interface RelativeToViewportMargins {
      /** Lower boundary of node layout area */
      bottom?: number
      /** Left boundary of node layout area */
      left?: number
      /** Right boundary of node layout area */
      right?: number
      /** Upper boundary of node layout area */
      top?: number
    }
  }

  /** `MediaQueryObserver` Object，For listening to pages media query Changes in status，If the width of interface is within a specified range。 */
  interface MediaQueryObserver {
    /** Start listening to pages media query Change */
    observe(descriptor: MediaQueryObserver.descriptor, callback: MediaQueryObserver.observeCallback): void
    /** Stop listening.。The echo function will no longer trigger. */
    disconnect(): void
  }

  namespace MediaQueryObserver {
    /** media query Descriptor */
    interface descriptor {
      /** Minimum Width of Pages (Units: px) */
      minWidth: number
      /** Maximum width of the page (Units: px) */
      maxWidth: number
      /** Page Width (Units: px) */
      width: number
      /** Minimum height of the page (Units: px) */
      minHeight: number
      /** Maximum height of the page（px in units） */
      maxHeight: number
      /** Page Height（px in units） */
      height: number
      /** Screen Orientation */
      orientation: 'landscape' | 'portrait'
    }

    /** Listening. media query Echo function for state change */
    type observeCallback = (res: {
      /** Whether the current status of page meets specified media query */
      matches: boolean
    }) => void
  }

  /** Use to get `WXML` Object of node information
   * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.html
   */
  interface NodesRef {
    /** Query request to add the layout of node。Relative to Show Area，Pixels。It's similar to the function. DOM It's... it's... `getBoundingClientRect`。Back `NodesRef` Corresponding `SelectorQuery`。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
     *   rect.id      // NodeID
     *   rect.dataset // Nodedataset
     *   rect.left    // Left boundary coordinates of nodes
     *   rect.right   // Right boundary coordinates of nodes
     *   rect.top     // Upper boundary coordinates of nodes
     *   rect.bottom  // Lower boundary coordinates of nodes
     *   rect.width   // Width of nodes
     *   rect.height  // Height of the Node
     * }).exec()
     * @example
     * ```
     * ```tsx
     * Vnmf.createSelectorQuery().selectAll('.a-class').boundingClientRect(function(rects){
     *   rects.forEach(function(rect){
     *     rect.id      // NodeID
     *     rect.dataset // Nodedataset
     *     rect.left    // Left boundary coordinates of nodes
     *     rect.right   // Right boundary coordinates of nodes
     *     rect.top     // Upper boundary coordinates of nodes
     *     rect.bottom  // Lower boundary coordinates of nodes
     *     rect.width   // Width of nodes
     *     rect.height  // Height of the Node
     *   })
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html
     */
    boundingClientRect(
      /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Node information will be available. `callback` Back in, back in.。 */
      callback?: NodesRef.BoundingClientRectCallback,
    ): SelectorQuery
    /** Add Node Context Object Query Request。Current Support [VideoContext](/docs/apis/media/video/VideoContext)、[CanvasContext](/docs/apis/canvas/CanvasContext)、[LivePlayerContext](/docs/apis/media/live/LivePlayerContext)、[EditorContext](/docs/apis/media/editor/EditorContext)and [MapContext](/docs/apis/media/map/MapContext) Retrieve。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().select('.the-video-class').context(function (res) {
     *   console.log(res.context) // Node corresponding Context Object。Like：The selected node is <video> Component，So here's the return. VideoContext Object
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.context.html
     */
    context(
      /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Returns node information。 */
      callback?: NodesRef.ContextCallback,
    ): SelectorQuery
    /** Get node-related information。The field to be fetched is infields_Other Organiser。Return value is `nodesRef` Corresponding `selectorQuery`
     *
     * **Attention.**
     * computedStyle Priority is higher than size，♪ When at the same time computedStyle It's specified in the inside. width/height And it's coming in. size: true，returns priority computedStyle Obtained width/height。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().select('#the-id').fields({
     *   dataset: true,
     *   size: true,
     *   scrollOffset: true,
     *   properties: ['scrollX', 'scrollY'],
     *   computedStyle: ['margin', 'backgroundColor'],
     *   context: true,
     * }, function (res) {
     *   res.dataset    // Nodedataset
     *   res.width      // Width of nodes
     *   res.height     // Height of the Node
     *   res.scrollLeft // Horizontal Scroll Position of Node
     *   res.scrollTop  // Straight scroll position of the node
     *   res.scrollX    // Nodes scroll-x Current value of properties
     *   res.scrollY    // Nodes scroll-y Current value of properties
     *   // Returns the style name that you specify to return here
     *   res.margin
     *   res.backgroundColor
     *   res.context    // Node corresponding Context Object
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.fields.html
     */
    fields(
      fields: NodesRef.Fields,
      /** Reciprocal function */
      callback?: NodesRef.FieldsCallback,
    ): SelectorQuery
    /** Fetch Node Node Examples。Current Support [Canvas](/docs/components/canvas) Retrieve。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().select('.canvas').node(function(res){
     *   console.log(res.node) // Node corresponding Canvas Example。
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.node.html
     */
    node(
      /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Returns node information。 */
      callback?: NodesRef.NodeCallback,
    ): SelectorQuery
    /** Cannot initialise Evolution's mail component.。Pixels。Node must be `scroll-view` Or... `viewport`，Back `NodesRef` Corresponding `SelectorQuery`。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().selectViewport().scrollOffset(function(res){
     *   res.id      // NodeID
     *   res.dataset // Nodedataset
     *   res.scrollLeft // Horizontal Scroll Position of Node
     *   res.scrollTop  // Straight scroll position of the node
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.scrollOffset.html
     */
    scrollOffset(
      /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Node information will be available. `callback` Back in, back in.。 */
      callback?: NodesRef.ScrollOffsetCallback,
    ): SelectorQuery
  }

  namespace NodesRef {
    /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Node information will be available. `callback` Back in, back in.。 */
    type BoundingClientRectCallback = (
      result: BoundingClientRectCallbackResult,
    ) => void
    interface BoundingClientRectCallbackResult {
      /** Lower boundary coordinates of nodes */
      bottom: number
      /** Node dataset */
      dataset: VnmfGeneral.IAnyObject
      /** Height of the Node */
      height: number
      /** Node ID */
      id: string
      /** Left boundary coordinates of nodes */
      left: number
      /** Right boundary coordinates of nodes */
      right: number
      /** Upper boundary coordinates of nodes */
      top: number
      /** Width of nodes */
      width: number
    }
    /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Returns node information。 */
    type ContextCallback = (result: ContextCallbackResult) => void
    interface ContextCallbackResult {
      /** Node corresponding Context Object */
      context: VnmfGeneral.IAnyObject
    }

    interface Fields {
      /** Specifies a list of style names，Returns the current value of node corresponding to style name */
      computedStyle?: string[]
      /** Whether to return the node corresponding Context Object */
      context?: boolean
      /** Whether or not to return node dataset */
      dataset?: boolean
      /** Whether or not to return node id */
      id?: boolean
      /** Whether or not to return node mark */
      mark?: boolean
      /** Whether to return the node corresponding Node Example */
      node?: boolean
      /** Specified list of attribute names，Returns the current attribute value of node corresponding to property name（Only conventional properties marked in the component document can be obtained，id class style The attribute value associated with the event is not available） */
      properties?: string[]
      /** Whether to return node layout position（`left` `right` `top` `bottom`） */
      rect?: boolean
      /** Yes Whether to return node `scrollLeft` `scrollTop`，Node must be `scroll-view` Or... `viewport` */
      scrollOffset?: boolean
      /** Whether or not to return node dimensions（`width` `height`） */
      size?: boolean
    }
    /** Reciprocal function */
    type FieldsCallback = (
      /** Relevant information on nodes */
      res: VnmfGeneral.IAnyObject,
    ) => void
    /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Returns node information。 */
    type NodeCallback = (result: NodeCallbackResult) => void
    /** Reciprocal function */
    interface NodeCallbackResult {
      /** Node corresponding Node Example */
      node: VnmfGeneral.IAnyObject
    }
    /** Reciprocal function，Under implementation `SelectorQuery.exec` After methodology，Node information will be available. `callback` Back in, back in.。 */
    type ScrollOffsetCallback = (result: ScrollOffsetCallbackResult) => void
    interface ScrollOffsetCallbackResult {
      /** Node dataset */
      dataset: VnmfGeneral.IAnyObject
      /** Node ID */
      id: string
      /** Horizontal Scroll Position of Node */
      scrollLeft: number
      /** Straight scroll position of the node */
      scrollTop: number
    }
  }

  /** Object to query node information
   * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html
   */
  interface SelectorQuery {
    /** Execute all requests。The results of the request form clusters in order which they were requested.，Yes.callbackreturns in the first parameter of。
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.exec.html
     */
    exec(
      /** Reciprocal function */
      callback?: (...args: any[]) => any,
    ): NodesRef
    /** Change the selection range of to a custom component `component` Internal。（Initial，Selecter selects only the nodes of page range，Do not select nodes from any custom components）。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Component({
     *   queryMultipleNodes () {
     *     const query = Vnmf.createSelectorQuery().in(this)
     *     query.select('#the-id').boundingClientRect(function(res){
     *       res.top // It's in this component. #the-id Upper boundary coordinates of nodes
     *     }).exec()
     *   }
     * })
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.in.html
     */
    in(
        /** Examples of custom components */
        component: VnmfGeneral.IAnyObject,
    ): SelectorQuery
    /** Select the first matching selection under current page `selector` Nodes。returns one `NodesRef` Object Examples，Can be used to get node information。
     *
     * **selector Syntax:**
     *
     *
     * selectorKind of. CSS Selector，But only the following grammars are supported:。
     *
     * - IDSelector：#the-id
     * - classSelector（You can specify multiples of them on a continuous basis.）：.a-class.another-class
     * - Subelement Selector：.the-parent > .the-child
     * - Progeny Selector：.the-ancestor .the-descendant
     * - Progeny Selector for Cross-Definitioned Components：.the-ancestor >>> .the-descendant
     * - Multi-selecter Convergence：#a-node, .some-other-nodes
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().select('#the-id').fields({
     *   dataset: true,
     *   size: true,
     *   scrollOffset: true,
     *   properties: ['scrollX', 'scrollY']
     * }, function (res){
     *   res.dataset    // Nodedataset
     *   res.width      // Width of nodes
     *   res.height     // Height of the Node
     *   res.scrollLeft // Horizontal Scroll Position of Node
     *   res.scrollTop  // Straight scroll position of the node
     *   res.scrollX    // Nodes scroll-x Current value of properties
     *   res.scrollY    // Nodes scroll-x Current value of properties
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.select.html
     */
    select(
      /** Selector */
      selector: string,
    ): NodesRef
    /** Select Matching Chooser under the current page selector All Nodes。
     *
     * **selector Syntax:**
     *
     * selectorKind of. CSS Selector，But only the following grammars are supported:。
     *
     * - IDSelector：#the-id
     * - classSelector（You can specify multiples of them on a continuous basis.）：.a-class.another-class
     * - Subelement Selector：.the-parent > .the-child
     * - Progeny Selector：.the-ancestor .the-descendant
     * - Progeny Selector for Cross-Definitioned Components：.the-ancestor >>> .the-descendant
     * - Multi-selecter Convergence：#a-node, .some-other-nodes
     * @supported weapp, h5, tt
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.selectAll.html
     */
    selectAll(
      /** Selector */
      selector: string,
    ): NodesRef
    /** Select Display Area。The size of the display area can be obtained、Scroll location etc.。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * Vnmf.createSelectorQuery().selectViewport().scrollOffset(function (res) {
     *   res.id      // NodeID
     *   res.dataset // Nodedataset
     *   res.scrollLeft // Horizontal Scroll Position of Node
     *   res.scrollTop  // Straight scroll position of the node
     * }).exec()
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.selectViewport.html
     */
    selectViewport(): NodesRef
  }

  interface VnmfStatic {
    /** returns one SelectorQuery Object Examples。In a custom component or page containing，Should be used `this.createSelectorQuery()` Take your place.。
     * @supported weapp, h5, tt
     * @example
     * ```tsx
     * const query = Vnmf.createSelectorQuery()
     * query.select('#the-id').boundingClientRect()
     * query.selectViewport().scrollOffset()
     * query.exec(function(res){
     *   res[0].top       // #the-idUpper boundary coordinates of nodes
     *   res[1].scrollTop // Show the vertical scrolling position of area
     * })
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
     */
    createSelectorQuery(): SelectorQuery

    /** Create and return one IntersectionObserver Object Examples。In a custom component or page containing，Should be used `this.createIntersectionObserver([options])` Take your place.。
     * @supported weapp, tt
     * @example
     * ```tsx
     * const observer = Vnmf.createIntersectionObserver(this, { thresholds: [0], observeAll: true })
     * ```
     * @see https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
     */
    createIntersectionObserver(
      /** Examples of custom components */
      component: VnmfGeneral.IAnyObject,
      /** Options */
      options?: createIntersectionObserver.Option,
    ): IntersectionObserver
  }
}