import { createContext, use, useSyncExternalStore } from 'react';

import type { CropperEngine } from '../core/engine.ts';
import type { CropperConfig, CropperState, CropValue, Point, Rotation, Size } from '../core/types.ts';

export interface CropperSource {
	src: string | undefined;
	naturalSize: Size | null;
}

/** stable cropper controller. */
export interface CropperContextValue {
	aspectRatio: number | undefined;
	config: CropperConfig;
	engine: CropperEngine;
	reportNaturalSize: (size: Size) => void;
	rotate: (turns: number) => void;
	setPan: (pan: Partial<Point>) => void;
	setRotation: (rotation: Rotation) => void;
	setSource: (source: CropperSource) => void;
	setValue: (value: CropValue) => void;
	setViewportSize: (size: Size) => void;
	setZoom: (zoom: number, focal?: Point) => void;
}

export const CropperContext = createContext<CropperContextValue | null>(null);

/**
 * get the cropper controller.
 *
 * @returns the cropper controller.
 * @throws if called outside a `<Cropper.Root>`.
 */
export const useCropper = (): CropperContextValue => {
	const ctx = use(CropperContext);
	if (!ctx) {
		throw new Error(`useCropper must be used within <Cropper.Root>`);
	}
	return ctx;
};

/**
 * subscribe to cropper state or a selected value.
 *
 * @param selector state selector that returns a stable value for unchanged input.
 * @returns full state or the selected value.
 * @throws when called outside a `<Cropper.Root>`.
 */
export function useCropperState(): CropperState;
export function useCropperState<T>(selector: (state: CropperState) => T): T;
export function useCropperState<T>(selector?: (state: CropperState) => T): T | CropperState {
	const { engine } = useCropper();

	const get = () => (selector ? selector(engine.getState()) : engine.getState());

	return useSyncExternalStore(engine.subscribe, get, get);
}