Image Transformations

/**
 * Context for chaining image manipulation operations with lazy execution
 */
class ImageManipulatorContext {
  resize(size: { width?: number | null; height?: number | null }): ImageManipulatorContext;
  rotate(degrees: number): ImageManipulatorContext;
  flip(flipType: FlipType): ImageManipulatorContext;
  crop(rect: { originX: number; originY: number; width: number; height: number }): ImageManipulatorContext;
  extent(options: { backgroundColor?: string | null; originX?: number; originY?: number; width: number; height: number }): ImageManipulatorContext;
  reset(): ImageManipulatorContext;
  renderAsync(): Promise<ImageRef>;
}

/**
 * Resizes the image to the given size
 * @param size - Target dimensions. If only width or height specified, other dimension calculated to preserve aspect ratio
 * @returns ImageManipulatorContext for method chaining
 */
resize(size: { width?: number | null; height?: number | null }): ImageManipulatorContext;

import { ImageManipulator } from "expo-image-manipulator";

// Resize to exact dimensions
const result1 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 300, height: 200 })
  .renderAsync();

// Resize width only (height calculated to preserve aspect ratio)
const result2 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 400 })
  .renderAsync();

// Resize height only (width calculated to preserve aspect ratio)  
const result3 = await ImageManipulator.manipulate(imageUri)
  .resize({ height: 300 })
  .renderAsync();

// Multiple resize operations can be chained
const result4 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 800 })
  .resize({ height: 600 }) // This will override previous resize
  .renderAsync();

/**
 * Rotates the image by the given number of degrees
 * @param degrees - Rotation angle in degrees. Positive for clockwise, negative for counter-clockwise
 * @returns ImageManipulatorContext for method chaining
 */
rotate(degrees: number): ImageManipulatorContext;

// Rotate 90 degrees clockwise
const result1 = await ImageManipulator.manipulate(imageUri)
  .rotate(90)
  .renderAsync();

// Rotate 45 degrees counter-clockwise
const result2 = await ImageManipulator.manipulate(imageUri)
  .rotate(-45)
  .renderAsync();

// Multiple rotations are cumulative
const result3 = await ImageManipulator.manipulate(imageUri)
  .rotate(90)
  .rotate(90) // Total 180 degrees
  .renderAsync();

// Combine with other operations
const result4 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 300 })
  .rotate(90)
  .renderAsync();

/**
 * Flips the image vertically or horizontally
 * @param flipType - Direction to flip: FlipType.Vertical or FlipType.Horizontal
 * @returns ImageManipulatorContext for method chaining
 */
flip(flipType: FlipType): ImageManipulatorContext;

import { FlipType } from "expo-image-manipulator";

// Flip horizontally (mirror left-right)
const result1 = await ImageManipulator.manipulate(imageUri)
  .flip(FlipType.Horizontal)
  .renderAsync();

// Flip vertically (mirror top-bottom)
const result2 = await ImageManipulator.manipulate(imageUri)
  .flip(FlipType.Vertical)
  .renderAsync();

// Using enum values
const result3 = await ImageManipulator.manipulate(imageUri)
  .flip(FlipType.Horizontal)
  .renderAsync();

// Combine with rotation for complex transformations
const result4 = await ImageManipulator.manipulate(imageUri)
  .rotate(90)
  .flip(FlipType.Horizontal)
  .renderAsync();

// For both horizontal and vertical flip, use separate operations
const result5 = await ImageManipulator.manipulate(imageUri)
  .flip(FlipType.Horizontal)
  .renderAsync();

const result6 = await ImageManipulator.manipulate(result5.uri)
  .flip(FlipType.Vertical)
  .renderAsync();

/**
 * Crops the image to the given rectangle's origin and size
 * @param rect - Rectangle defining the crop area with top-left origin and dimensions
 * @returns ImageManipulatorContext for method chaining
 */
crop(rect: { originX: number; originY: number; width: number; height: number }): ImageManipulatorContext;

// Crop a 200x200 square from top-left corner
const result1 = await ImageManipulator.manipulate(imageUri)
  .crop({ originX: 0, originY: 0, width: 200, height: 200 })
  .renderAsync();

// Crop from center (assuming 800x600 original)
const result2 = await ImageManipulator.manipulate(imageUri)
  .crop({ originX: 200, originY: 150, width: 400, height: 300 })
  .renderAsync();

// Crop after resize for precise control
const result3 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 800 })
  .crop({ originX: 100, originY: 50, width: 600, height: 400 })
  .renderAsync();

// Multiple crops can be applied sequentially
const result4 = await ImageManipulator.manipulate(imageUri)
  .crop({ originX: 50, originY: 50, width: 400, height: 400 })
  .crop({ originX: 100, originY: 100, width: 200, height: 200 })
  .renderAsync();

/**
 * Set the image size and offset. If enlarged, unfilled areas are set to backgroundColor
 * @param options - Extent configuration with size, position, and background color
 * @returns ImageManipulatorContext for method chaining
 * @platform web
 */
extent(options: {
  backgroundColor?: string | null;
  originX?: number;
  originY?: number;
  width: number;
  height: number;
}): ImageManipulatorContext;

// Extend image to larger canvas with white background
const result1 = await ImageManipulator.manipulate(imageUri)
  .extent({
    width: 800,
    height: 600,
    backgroundColor: '#FFFFFF'
  })
  .renderAsync();

// Position image within larger canvas
const result2 = await ImageManipulator.manipulate(imageUri)
  .extent({
    width: 1000,
    height: 800,
    originX: 100,
    originY: 150,
    backgroundColor: 'transparent'
  })
  .renderAsync();

// Combine with other operations
const result3 = await ImageManipulator.manipulate(imageUri)
  .resize({ width: 300 })
  .extent({
    width: 500,
    height: 500,
    originX: 100,
    originY: 100,
    backgroundColor: '#F0F0F0'
  })
  .renderAsync();

/**
 * Resets the manipulator context to the originally loaded image
 * @returns ImageManipulatorContext with all transformations cleared
 */
reset(): ImageManipulatorContext;

// Reset after applying transformations
const context = ImageManipulator.manipulate(imageUri);

// Apply some transformations
context.resize({ width: 300 }).rotate(90).flip('horizontal');

// Reset to original image
context.reset();

// Apply different transformations
const result = await context
  .resize({ width: 500 })
  .crop({ originX: 0, originY: 0, width: 400, height: 400 })
  .renderAsync();

/**
 * Awaits for all manipulation tasks to finish and resolves with a reference to the result image
 * @returns Promise that resolves to ImageRef representing the manipulated image
 */
renderAsync(): Promise<ImageRef>;

// Simple render after transformations
const context = ImageManipulator.manipulate(imageUri);
const image = await context
  .resize({ width: 400 })
  .rotate(45)
  .renderAsync();

// Multiple renders from same context (re-executes all operations)
const context2 = ImageManipulator.manipulate(imageUri)
  .resize({ width: 300 })
  .flip('horizontal');

const image1 = await context2.renderAsync();
const image2 = await context2.renderAsync(); // Same result as image1

// Save rendered images
const result1 = await image1.saveAsync();
const result2 = await image2.saveAsync();

// Clean up
context2.release();
image1.release();
image2.release();

/**
 * Flip direction enumeration
 */
enum FlipType {
  Vertical = 'vertical',
  Horizontal = 'horizontal'
}

/**
 * Rectangle definition for crop operations
 */
interface CropRect {
  originX: number;
  originY: number;
  width: number;
  height: number;
}

/**
 * Size specification for resize operations
 */
interface ResizeSize {
  width?: number | null;
  height?: number | null;
}

/**
 * Options for extent operations (Web only)
 */
interface ExtentOptions {
  backgroundColor?: string | null;
  originX?: number;
  originY?: number;
  width: number;
  height: number;
}