/**
 * Children utility object for handling children elements
 */
interface Children {
  /**
   * Map over children array
   * @param children - Child element or array of child elements
   * @param callback - Callback function receiving each child
   * @returns Processed children array
   */
  map<T = any>(
    children: T | T[] | null,
    callback: (child: T | null) => any
  ): any;

  /**
   * Clone and return a new React Element
   * @param element - Element to clone
   * @param props - New props to merge
   * @returns New element
   */
  cloneElement(element: any, props: any): any;

  /**
   * Convert children to an array
   * @param element - Child element or array of child elements
   * @returns Array of child elements
   */
  toArray<T = any>(element: T | T[] | null): T[] | null;

  /**
   * Compare two elements
   * @param nextElement - New element
   * @param lastElement - Old element
   * @param callback - Comparison callback
   */
  compare<T = any>(
    nextElement: T | T[] | null,
    lastElement: T | T[] | null,
    callback: (next: T | T[] | null, last: T | T[] | null) => any
  ): any;
}

/**
 * Create an element reference
 * @param T - Type of the referenced object
 * @returns Reference object with current property
 */
declare function createRef<T = any>(): {
  current: T;
};

/**
 * Create JSX element
 * @param type - Element type (component constructor or tag name)
 * @param props - Element properties
 * @param children - Child elements
 * @returns JSX element
 */
declare function jsx(
  type: ElementType,
  props: any,
  ...children: any[]
): JSX.Element;

/**
 * createElement is an alias for jsx, both are functionally identical
 */
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) => {
        // Process each child element
        return child
      })}
    </group>
  )
}

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

function enhanceChildren(children) {
  return Children.map(children, (child) => {
    // Add extra props to each child
    return Children.cloneElement(child, {
      extraProp: 'value',
      onClick: handleClick
    })
  })
}

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

function analyzeChildren(children) {
  // Convert children to array for array operations
  const childrenArray = Children.toArray(children)
  const count = childrenArray.length

  return <text>Total {count} children</text>
}

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

function MyComponent() {
  const chartRef = createRef()

  const handleClick = () => {
    // Access chart instance via 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';

// Dynamically create chart element
const chartElement = createElement(
  Chart,
  { data: myData },
  createElement(Interval, { x: 'genre', y: 'sold' })
)

// Use in render
<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
}