responsive-image-canvas/src/editor/hooks/useDistortionEditor.ts

import { useState, useCallback } from 'react';
import { DistortionArea, Point } from '../../types/area';
import { EditorState } from '../types';

export const useDistortionEditor = (initialAreas: DistortionArea[] = []) => {
	const [state, setState] = useState<EditorState>({
		selectedAreaId: initialAreas[0]?.id || null,
		areas: initialAreas,
		editMode: 'normal',
		draggingPointIndex: null,
	});

	/** 영역 선택 */
	const selectArea = useCallback((areaId: string | null) => {
		setState((prev) => ({ ...prev, selectedAreaId: areaId }));
	}, []);

	/** 영역 추가 */
	const addArea = useCallback((area: DistortionArea) => {
		setState((prev) => ({
			...prev,
			areas: [...prev.areas, area],
			selectedAreaId: area.id,
		}));
	}, []);

	/** 영역 삭제 */
	const removeArea = useCallback((areaId: string) => {
		setState((prev) => {
			const newAreas = prev.areas.filter((a) => a.id !== areaId);
			return {
				...prev,
				areas: newAreas,
				selectedAreaId:
					prev.selectedAreaId === areaId ? newAreas[0]?.id || null : prev.selectedAreaId,
			};
		});
	}, []);

	/** 영역 업데이트 */
	const updateArea = useCallback((areaId: string, updates: Partial<DistortionArea>) => {
		setState((prev) => ({
			...prev,
			areas: prev.areas.map((area) => (area.id === areaId ? { ...area, ...updates } : area)),
		}));
	}, []);

	/** 포인트 업데이트 */
	const updatePoint = useCallback((areaId: string, pointIndex: number, point: Point) => {
		setState((prev) => ({
			...prev,
			areas: prev.areas.map((area) => {
				if (area.id === areaId) {
					const newPoints = [...area.basePoints] as [Point, Point, Point, Point];
					newPoints[pointIndex] = point;
					return { ...area, basePoints: newPoints };
				}
				return area;
			}),
		}));
	}, []);

	/** 드래그 시작 */
	const startDragging = useCallback((pointIndex: number) => {
		setState((prev) => ({ ...prev, draggingPointIndex: pointIndex }));
	}, []);

	/** 드래그 종료 */
	const stopDragging = useCallback(() => {
		setState((prev) => ({ ...prev, draggingPointIndex: null }));
	}, []);

	/** 편집 모드 변경 */
	const setEditMode = useCallback((mode: EditorState['editMode']) => {
		setState((prev) => ({ ...prev, editMode: mode }));
	}, []);

	/** 선택된 영역 가져오기 */
	const getSelectedArea = useCallback(() => {
		return state.areas.find((a) => a.id === state.selectedAreaId) || null;
	}, [state.areas, state.selectedAreaId]);

	return {
		state,
		selectArea,
		addArea,
		removeArea,
		updateArea,
		updatePoint,
		startDragging,
		stopDragging,
		setEditMode,
		getSelectedArea,
	};
};