import { type Point, Vector } from '@flatten-js/core';
import { CANVAS_INPUT_FIELD_FONT_SIZE } from '../App.consts.ts';

export interface DrawController {
	getCanvasSize(): Point;
	getScreenScale(): number;
	getScreenOffset(): Point;

	worldToTarget(worldCoordinate: Point): Point;
	worldsToTargets(worldCoordinates: Point[]): Point[];
	targetToWorld(screenCoordinate: Point): Point;
	targetsToWorlds(screenCoordinates: Point[]): Point[];

	setLineStyles(
		isHighlighted: boolean,
		isSelected: boolean,
		color: string,
		lineWidth: number,
		dash?: number[]
	): void;
	setFillStyles(fillColor: string): void;
	/** 0~1. 도면층·객체 투명도를 그릴 때 반영한다 */
	setOpacity(opacity: number): void;
	clear(): void;
	drawLine(startPoint: Point, endPoint: Point): void;
	drawArc(
		centerPoint: Point,
		radius: number,
		startAngle: number,
		endAngle: number,
		counterClockwise: boolean
	): void;
	drawText(
		label: string,
		basePoint: Point,
		options: Partial<{
			textDirection?: Vector;
			textAlign: 'left' | 'center' | 'right';
			textColor: string;
			fontSize: number;
			fontFamily: string;
			bold: boolean;
			italic: boolean;
		}>
	): void;
	drawImage(
		imageElement: HTMLImageElement,
		xMin: number,
		yMin: number,
		width: number,
		height: number,
		angle: number
	): void;
	fillPolygon(...points: Point[]): void;
}

export const DEFAULT_TEXT_OPTIONS = {
	textDirection: new Vector(1, 0),
	textAlign: 'center' as const,
	textColor: '#FFF',
	fontSize: CANVAS_INPUT_FIELD_FONT_SIZE,
	fontFamily: 'sans-serif',
	bold: false,
	italic: false,
};