Shape Drawing

/**
 * Draws a circle with center point and radius
 * @param props - Circle properties (supports both coordinate and vector syntax)
 * @returns JSX circle element
 */
function Circle(props: CircleProps): JSX.Element;

// Union type supporting both coordinate and vector center definitions
type CircleProps = CirclePropsWithCoordinates | CirclePropsWithCenter;

interface CirclePropsWithCoordinates extends DrawingNodeProps {
  /** Center X coordinate */
  cx: number;
  /** Center Y coordinate */
  cy: number; 
  /** Circle radius */
  r: number;
}

interface CirclePropsWithCenter extends DrawingNodeProps {
  /** Center point as vector */
  c: Vector;
  /** Circle radius */
  r: number;
}

import { Circle, Paint } from "@shopify/react-native-skia";

// Basic circle with center coordinates
<Circle cx={50} cy={50} r={25}>
  <Paint color="red" />
</Circle>

// Circle with center point vector
<Circle c={{ x: 100, y: 100 }} r={30}>
  <Paint color="blue" style="stroke" strokeWidth={2} />
</Circle>

/**
 * Draws a rectangle with position and dimensions
 * @param props - Rectangle properties
 * @returns JSX rectangle element
 */
function Rect(props: RectProps): JSX.Element;

interface RectProps extends DrawingNodeProps {
  /** Left position */
  x: number;
  /** Top position */
  y: number;
  /** Rectangle width */
  width: number;
  /** Rectangle height */
  height: number;
}

/**
 * Draws a rectangle with rounded corners
 * @param props - Rounded rectangle properties
 * @returns JSX rounded rectangle element
 */
function RoundedRect(props: RoundedRectProps): JSX.Element;

interface RoundedRectProps extends DrawingNodeProps {
  /** Left position */
  x: number;
  /** Top position */
  y: number;
  /** Rectangle width */
  width: number;
  /** Rectangle height */
  height: number;
  /** Corner radius (uniform for all corners) */
  r: number | RadiusValue;
}

type RadiusValue = number | {
  topLeft?: number;
  topRight?: number;
  bottomRight?: number;
  bottomLeft?: number;
};

/**
 * Draws an oval/ellipse shape
 * @param props - Oval properties
 * @returns JSX oval element
 */
function Oval(props: OvalProps): JSX.Element;

interface OvalProps extends DrawingNodeProps {
  /** Left position */
  x: number;
  /** Top position */
  y: number;
  /** Oval width */
  width: number;
  /** Oval height */
  height: number;
}

/**
 * Draws a straight line between two points
 * @param props - Line properties
 * @returns JSX line element
 */
function Line(props: LineProps): JSX.Element;

interface LineProps extends DrawingNodeProps {
  /** Start point of the line */
  p1: Vector;
  /** End point of the line */
  p2: Vector;
}

// Basic shapes
<Rect x={10} y={10} width={100} height={50}>
  <Paint color="green" />
</Rect>

<RoundedRect x={20} y={20} width={80} height={60} r={10}>
  <Paint color="orange" />
</RoundedRect>

<Oval x={0} y={0} width={120} height={80}>
  <Paint color="purple" />
</Oval>

<Line p1={{ x: 0, y: 0 }} p2={{ x: 100, y: 50 }}>
  <Paint color="black" strokeWidth={2} />
</Line>

/**
 * Draws custom vector paths using SVG path syntax or SkPath objects
 * @param props - Path properties
 * @returns JSX path element
 */
function Path(props: PathProps): JSX.Element;

interface PathProps extends DrawingNodeProps {
  /** Path definition (SVG string or SkPath object) */
  path: PathDef;
  /** Start position along path (0.0 to 1.0) */
  start?: number;
  /** End position along path (0.0 to 1.0) */
  end?: number;
}

type PathDef = string | SkPath;

/**
 * Draws multiple points with specified drawing mode
 * @param props - Points properties
 * @returns JSX points element
 */
function Points(props: PointsProps): JSX.Element;

interface PointsProps extends DrawingNodeProps {
  /** Array of points to draw */
  points: SkPoint[];
  /** Drawing mode for the points */
  mode: PointMode;
}

enum PointMode {
  Points = 0,  // Draw individual points
  Lines = 1,   // Draw lines between consecutive points
  Polygon = 2  // Draw closed polygon
}

/**
 * Draws geometry using vertex arrays with optional texture coordinates and colors
 * @param props - Vertices properties
 * @returns JSX vertices element
 */
function Vertices(props: VerticesProps): JSX.Element;

interface VerticesProps extends DrawingNodeProps {
  /** Array of vertex positions */
  vertices: SkPoint[];
  /** Vertex drawing mode */
  mode: VertexMode;
  /** Optional texture coordinates for each vertex */
  textures?: SkPoint[];
  /** Optional colors for each vertex */
  colors?: Color[];
  /** Optional triangle indices for indexed drawing */
  indices?: number[];
}

enum VertexMode {
  Triangles = 0,
  TriangleStrip = 1,
  TriangleFan = 2
}

/**
 * Draws a rectangle with a hole (difference between outer and inner rectangles)
 * @param props - DiffRect properties
 * @returns JSX diff rectangle element
 */
function DiffRect(props: DiffRectProps): JSX.Element;

interface DiffRectProps extends DrawingNodeProps {
  /** Outer rectangle */
  outer: SkRRect;
  /** Inner rectangle (hole) */
  inner: SkRRect;
}

/**
 * Draws a cubic Bezier patch for smooth surfaces
 * @param props - Patch properties
 * @returns JSX patch element
 */
function Patch(props: PatchProps): JSX.Element;

interface PatchProps extends DrawingNodeProps {
  /** Array of 12 cubic Bezier control points defining the patch */
  patch: CubicBezierHandle[];
  /** Optional texture coordinates for the patch corners */
  textures?: SkPoint[];
  /** Optional colors for the patch corners */
  colors?: Color[];
}

interface CubicBezierHandle {
  pos: SkPoint;
  c1: SkPoint;
  c2: SkPoint;
}

/**
 * Draws sprites from a texture atlas with transforms
 * @param props - Atlas properties
 * @returns JSX atlas element
 */
function Atlas(props: AtlasProps): JSX.Element;

interface AtlasProps extends DrawingNodeProps {
  /** Source image containing sprite atlas */
  image: SkImage;
  /** Array of source rectangles in the atlas image */
  sprites: SkRect[];
  /** Array of transforms for each sprite */
  transforms: SkRSXform[];
  /** Optional colors for each sprite */
  colors?: Color[];
}

/**
 * Fills the entire canvas with the current paint
 * @param props - Fill properties
 * @returns JSX fill element
 */
function Fill(props: FillProps): JSX.Element;

interface FillProps extends DrawingNodeProps {
  // No additional properties - uses canvas bounds
}

/**
 * Draws a box with shadow support and rounded corners
 * @param props - Box properties
 * @returns JSX box element
 */
function Box(props: BoxProps): JSX.Element;

interface BoxProps extends DrawingNodeProps {
  /** Box definition (SkRect or SkRRect) */
  box: SkRect | SkRRect;
}

/**
 * Container that fits content within specified bounds using fit modes
 * @param props - FitBox properties
 * @returns JSX fit box element
 */
function FitBox(props: FitBoxProps): JSX.Element;

interface FitBoxProps extends DrawingNodeProps {
  /** How to fit the content */
  fit: Fit;
  /** Source bounds of the content */
  src: SkRect;
  /** Destination bounds to fit within */
  dst: SkRect;
}

type Fit = 
  | "cover"      // Cover entire dst, may crop
  | "contain"    // Fit entirely within dst, may have empty space
  | "fill"       // Stretch to fill dst exactly
  | "fitHeight"  // Fit to dst height, preserve aspect ratio
  | "fitWidth"   // Fit to dst width, preserve aspect ratio
  | "none"       // No scaling
  | "scaleDown"; // Scale down only, never up

// Advanced shapes
<Path path="M 10 10 L 100 10 L 100 100 Z">
  <Paint color="red" />
</Path>

<Points 
  points={[{x: 10, y: 10}, {x: 50, y: 50}, {x: 90, y: 10}]}
  mode={PointMode.Lines}
>
  <Paint color="blue" strokeWidth={3} />
</Points>

<Vertices
  vertices={[{x: 50, y: 10}, {x: 90, y: 90}, {x: 10, y: 90}]}
  mode={VertexMode.Triangles}
  colors={["red", "green", "blue"]}
/>

<Fill>
  <Paint color="lightgray" />
</Fill>

<FitBox
  fit="contain"
  src={{ x: 0, y: 0, width: 200, height: 100 }}
  dst={{ x: 0, y: 0, width: 100, height: 100 }}
>
  {/* content to fit */}
</FitBox>

// Base drawing properties
interface DrawingNodeProps extends TransformProps {
  children?: React.ReactNode;
}

interface TransformProps {
  transform?: Transform3d[];
  origin?: Vector;
  matrix?: InputMatrix;
}

// Geometric types
interface SkPoint {
  x: number;
  y: number;
}

interface SkRect {
  x: number;
  y: number;
  width: number;
  height: number;
}

interface SkRRect {
  rect: SkRect;
  rx: number;
  ry: number;
}

interface SkRSXform {
  scos: number;  // Cosine of rotation * scale
  ssin: number;  // Sine of rotation * scale
  tx: number;    // Translation X
  ty: number;    // Translation Y
}

// Vector and path types
type Vector = SkPoint | { x: number; y: number };
type PathDef = string | SkPath;
type Color = string | number | Float32Array;

// Transform types
type Transform3d = 
  | { translateX: number }
  | { translateY: number }
  | { scale: number }
  | { scaleX: number }
  | { scaleY: number }
  | { rotate: number }
  | { rotateX: number }
  | { rotateY: number }
  | { rotateZ: number }
  | { skewX: number }
  | { skewY: number };

type InputMatrix = readonly number[] | SkMatrix;