Effects and Filters

/**
 * Linear gradient shader
 */
function LinearGradient(props: LinearGradientProps): JSX.Element;

interface LinearGradientProps {
  start: Vector;
  end: Vector;
  colors: Color[];
  positions?: number[];
  mode?: TileMode;
  flags?: number;
  localMatrix?: InputMatrix;
}

/**
 * Radial gradient shader
 */
function RadialGradient(props: RadialGradientProps): JSX.Element;

interface RadialGradientProps {
  c: Vector;
  r: number;
  colors: Color[];
  positions?: number[];
  mode?: TileMode;
  localMatrix?: InputMatrix;
}

/**
 * Sweep (angular) gradient shader
 */
function SweepGradient(props: SweepGradientProps): JSX.Element;

interface SweepGradientProps {
  c: Vector;
  colors: Color[];
  positions?: number[];
  localMatrix?: InputMatrix;
  start?: number;  // Start angle in degrees
  end?: number;    // End angle in degrees
}

/**
 * Two-point conical gradient shader
 */
function TwoPointConicalGradient(props: TwoPointConicalGradientProps): JSX.Element;

interface TwoPointConicalGradientProps {
  start: CircleDef;
  end: CircleDef;
  colors: Color[];
  positions?: number[];
  mode?: TileMode;
  localMatrix?: InputMatrix;
}

interface CircleDef {
  c: Vector;
  r: number;
}

enum TileMode {
  Clamp = 0,
  Repeat = 1,
  Mirror = 2,
  Decal = 3
}

/**
 * Solid color shader
 */
function Color(props: ColorProps): JSX.Element;

interface ColorProps {
  color: Color;
}

/**
 * Image shader for texture patterns
 */
function ImageShader(props: ImageShaderProps): JSX.Element;

interface ImageShaderProps {
  image: SkImage;
  tx?: TileMode;
  ty?: TileMode;
  fm?: FilterMode;
  mm?: MipmapMode;
  localMatrix?: InputMatrix;
}

/**
 * Runtime shader for custom GPU effects
 */
function Shader(props: ShaderProps): JSX.Element;

interface ShaderProps {
  source: SkRuntimeEffect;
  uniforms?: Record<string, number | number[]>;
  children?: ShaderChildren;
  localMatrix?: InputMatrix;
}

/**
 * Turbulence noise shader
 */
function Turbulence(props: TurbulenceProps): JSX.Element;

interface TurbulenceProps {
  freqX: number;
  freqY: number;
  octaves: number;
  seed: number;
  tileWidth?: number;
  tileHeight?: number;
}

/**
 * Fractal noise shader
 */
function FractalNoise(props: FractalNoiseProps): JSX.Element;

interface FractalNoiseProps {
  freqX: number;
  freqY: number;
  octaves: number;
  seed: number;
  tileWidth?: number;
  tileHeight?: number;
}

/**
 * Gaussian blur image filter
 */
function Blur(props: BlurProps): JSX.Element;

interface BlurProps {
  blur: number | Vector;
  mode?: BlurStyle;
  respectCTM?: boolean;
}

enum BlurStyle {
  Normal = 0,
  Solid = 1,
  Outer = 2,
  Inner = 3
}

/**
 * Position offset filter
 */
function Offset(props: OffsetProps): JSX.Element;

interface OffsetProps {
  x: number;
  y: number;
}

/**
 * Drop shadow effect
 */
function Shadow(props: ShadowProps): JSX.Element;

interface ShadowProps {
  dx: number;
  dy: number;
  blur: number;
  color: Color;
  shadowOnly?: boolean;
  inner?: boolean;
}

/**
 * Displacement mapping filter
 */
function DisplacementMap(props: DisplacementMapProps): JSX.Element;

interface DisplacementMapProps {
  channelX: ColorChannel;
  channelY: ColorChannel;
  scale: number;
  in2?: ReactElement;
}

enum ColorChannel {
  R = 0,
  G = 1,
  B = 2,
  A = 3
}

/**
 * Morphological operations (dilate/erode)
 */
function Morphology(props: MorphologyProps): JSX.Element;

interface MorphologyProps {
  operator: MorphologyOperator;
  radius: number | Vector;
}

enum MorphologyOperator {
  Dilate = 0,
  Erode = 1
}

/**
 * Runtime shader as image filter
 */
function RuntimeShader(props: RuntimeShaderProps): JSX.Element;

interface RuntimeShaderProps {
  source: SkRuntimeEffect;
  uniforms?: Record<string, number | number[]>;
  children?: ReactElement[];
}

/**
 * Color matrix transformation
 */
function Matrix(props: MatrixProps): JSX.Element;

interface MatrixProps {
  matrix: number[];  // 4x5 color matrix (20 values)
}

/**
 * Blend with a solid color
 */
function BlendColor(props: BlendColorProps): JSX.Element;

interface BlendColorProps {
  color: Color;
  mode: BlendMode;
}

/**
 * Linear interpolation between color filters
 */
function Lerp(props: LerpProps): JSX.Element;

interface LerpProps {
  t: number;  // Interpolation factor (0.0 to 1.0)
  children: [ReactElement, ReactElement];  // Two color filters to interpolate
}

/**
 * Linear to sRGB gamma correction
 */
function LinearToSRGBGamma(): JSX.Element;

/**
 * sRGB to linear gamma correction
 */
function SRGBToLinearGamma(): JSX.Element;

/**
 * Luminance-based color filtering
 */
function LumaColorFilter(): JSX.Element;

/**
 * Dashed stroke pattern
 */
function Dash(props: DashProps): JSX.Element;

interface DashProps {
  intervals: number[];  // Alternating dash and gap lengths
  phase?: number;       // Starting offset into pattern
}

/**
 * 1D path effect
 */
function Path1D(props: Path1DProps): JSX.Element;

interface Path1DProps {
  path: PathDef;
  advance: number;
  phase: number;
  style: Path1DEffectStyle;
}

enum Path1DEffectStyle {
  Translate = 0,
  Rotate = 1,
  Morph = 2
}

/**
 * 2D path effect
 */
function Path2D(props: Path2DProps): JSX.Element;

interface Path2DProps {
  matrix: InputMatrix;
  path: PathDef;
}

/**
 * Line 2D effect
 */
function Line2D(props: Line2DProps): JSX.Element;

interface Line2DProps {
  width: number;
  matrix: InputMatrix;
}

/**
 * Corner rounding effect
 */
function Corner(props: CornerProps): JSX.Element;

interface CornerProps {
  r: number;  // Corner radius
}

/**
 * Discrete path effect (random deviations)
 */
function Discrete(props: DiscreteProps): JSX.Element;

interface DiscreteProps {
  length: number;  // Segment length
  deviation: number;  // Maximum deviation
  seed: number;  // Random seed
}

/**
 * Combine multiple path effects
 */
function Sum(props: SumProps): JSX.Element;

interface SumProps {
  children: ReactElement[];  // Path effects to combine
}

/**
 * Apply image filter to backdrop
 */
function BackdropFilter(props: BackdropFilterProps): JSX.Element;

interface BackdropFilterProps {
  filter: ReactElement;  // Image filter to apply
  clip?: ClipDef;        // Optional clipping region
}

/**
 * Blur the backdrop content
 */
function BackdropBlur(props: BackdropBlurProps): JSX.Element;

interface BackdropBlurProps {
  blur: number;
  clip?: ClipDef;
}

import { 
  LinearGradient, 
  Blur, 
  Shadow, 
  Dash, 
  Matrix,
  Circle, 
  Paint 
} from "@shopify/react-native-skia";

// Linear gradient fill
<Circle cx={50} cy={50} r={30}>
  <LinearGradient
    start={{ x: 0, y: 0 }}
    end={{ x: 100, y: 0 }}
    colors={["red", "blue"]}
  />
</Circle>

// Blurred circle with shadow
<Circle cx={100} cy={50} r={25}>
  <Paint color="green" />
  <Blur blur={2} />
  <Shadow dx={2} dy={2} blur={4} color="rgba(0,0,0,0.3)" />
</Circle>

// Dashed stroke
<Circle cx={150} cy={50} r={20}>
  <Paint color="purple" style="stroke" strokeWidth={3} />
  <Dash intervals={[5, 5]} />
</Circle>

// Color matrix effect (desaturate)
<Circle cx={200} cy={50} r={25}>
  <Paint color="orange" />
  <Matrix matrix={[
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0.33, 0.33, 0.33, 0, 0,
    0, 0, 0, 1, 0
  ]} />
</Circle>

type Vector = SkPoint | { x: number; y: number };
type Color = string | number | Float32Array;
type InputMatrix = readonly number[] | SkMatrix;
type PathDef = string | SkPath;
type ClipDef = SkRRect | SkRect | PathDef;

interface SkPoint {
  x: number;
  y: number;
}

// Shader children type for runtime shaders
type ShaderChildren = ReactElement | ReactElement[];

// Filter and effect enums
enum FilterMode {
  Nearest = 0,
  Linear = 1
}

enum MipmapMode {
  None = 0,
  Nearest = 1,
  Linear = 2
}