/**
 * Children 工具对象，用于处理子元素
 */
interface Children {
  /**
   * 遍历子元素数组
   * @param children - 子元素或子元素数组
   * @param callback - 回调函数，接收每个子元素
   * @returns 处理后的子元素数组
   */
  map<T = any>(
    children: T | T[] | null,
    callback: (child: T | null) => any
  ): any;

  /**
   * 克隆并返回新的 React 元素
   * @param element - 要克隆的元素
   * @param props - 要合并的新属性
   * @returns 新的元素
   */
  cloneElement(element: any, props: any): any;

  /**
   * 将子元素转换为数组
   * @param element - 子元素或子元素数组
   * @returns 子元素数组
   */
  toArray<T = any>(element: T | T[] | null): T[] | null;

  /**
   * 比较两个元素
   * @param nextElement - 新元素
   * @param lastElement - 旧元素
   * @param callback - 比较回调
   */
  compare<T = any>(
    nextElement: T | T[] | null,
    lastElement: T | T[] | null,
    callback: (next: T | T[] | null, last: T | T[] | null) => any
  ): any;
}

/**
 * 创建元素引用
 * @param T - 引用对象的类型
 * @returns 包含 current 属性的引用对象
 */
declare function createRef<T = any>(): {
  current: T;
};

/**
 * 创建 JSX 元素
 * @param type - 元素类型（组件构造函数或标签名）
 * @param props - 元素属性
 * @param children - 子元素
 * @returns JSX 元素
 */
declare function jsx(
  type: ElementType,
  props: any,
  ...children: any[]
): JSX.Element;

/**
 * createElement 是 jsx 的别名，两者功能完全一致
 */
declare function createElement(
  type: ElementType,
  props: any,
  ...children: any[]
): JSX.Element;

Children.map<T = any>(
  children: T | T[] | null,
  callback: (child: T | null) => any
): any

Children.cloneElement(element: any, props: any): any

Children.toArray<T = any>(element: T | T[] | null): T[] | null

Children.compare<T = any>(
  nextElement: T | T[] | null,
  lastElement: T | T[] | null,
  callback: (next: T | T[] | null, last: T | T[] | null) => any
): any

declare function jsx(
  type: ElementType,
  props: any,
  ...children: any[]
): JSX.Element;

declare function createRef<T = any>(): {
  current: T;
};

import { Children } from '@antv/f2';

function ParentComponent({ children }) {
  return (
    <group>
      {Children.map(children, (child) => {
        // 对每个子元素进行处理
        return child
      })}
    </group>
  )
}

import { Children } from '@antv/f2';

function enhanceChildren(children) {
  return Children.map(children, (child) => {
    // 为每个子元素添加额外的属性
    return Children.cloneElement(child, {
      extraProp: 'value',
      onClick: handleClick
    })
  })
}

import { Children } from '@antv/f2';

function analyzeChildren(children) {
  // 将子元素转换为数组以便进行数组操作
  const childrenArray = Children.toArray(children)
  const count = childrenArray.length

  return <text>共有 {count} 个子元素</text>
}

import { Chart, createRef } from '@antv/f2';

function MyComponent() {
  const chartRef = createRef()

  const handleClick = () => {
    // 通过 ref 访问图表实例
    const chart = chartRef.current
    console.log(chart.getLayout())
  }

  return (
    <Chart ref={chartRef} data={data}>
      <Interval x="genre" y="sold" />
    </Chart>
  )
}

import { createElement, Chart, Interval } from '@antv/f2';

// 动态创建图表元素
const chartElement = createElement(
  Chart,
  { data: myData },
  createElement(Interval, { x: 'genre', y: 'sold' })
)

// 在渲染中使用
<Canvas context={context}>
  {chartElement}
</Canvas>

import { createElement, Chart, Interval, Line } from '@antv/f2';

function createChart(type, data) {
  const geometryProps = {
    x: 'date',
    y: 'value'
  }

  const Geometry = type === 'line' ? Line : Interval

  return createElement(
    Chart,
    { data },
    createElement(Geometry, geometryProps)
  )
}

import { Children } from '@antv/f2';

function shouldComponentUpdate(nextProps) {
  let shouldUpdate = false

  Children.compare(
    nextProps.children,
    this.props.children,
    (next, last) => {
      if (next !== last) {
        shouldUpdate = true
      }
    }
  )

  return shouldUpdate
}