/** 화면 우하단 탐색 막대 (줌 표시·전체 보기) — 제목줄이 없는 화면(M02)은 되돌리기 · 다시 하기도 */
import type { FC } from 'react';
import { runCommandInput } from '../commands/run-command';
import {
	getScreenCanvasDrawController,
	isDrawingReadOnly,
	isHostSave,
	isViewOnly,
} from '../state';

export const ViewControls: FC = () => {
	const zoom = getScreenCanvasDrawController()?.getScreenScale() ?? 1;
	// 제목줄(빠른 막대)이 없는 M02 양식 · 구조물 카드 — 고칠 수 있을 때만
	const showUndo = isHostSave() && !isViewOnly() && !isDrawingReadOnly();

	return (
		<div className="cad-view-controls controls">
			{showUndo && (
				<>
					<button type="button" onClick={() => runCommandInput('UNDO')} title="실행 취소 (Ctrl+Z)">
						↶
					</button>
					<button type="button" onClick={() => runCommandInput('REDO')} title="다시 실행 (Ctrl+Y)">
						↷
					</button>
				</>
			)}
			<button
				type="button"
				className="cad-view-controls__fit"
				onClick={() => runCommandInput('ZOOM')}
				title="범위 줌 (Z) — 도면 전체를 화면에 맞춘다"
			>
				⛶
			</button>
			<button type="button" onClick={() => runCommandInput('ZOOMIN')} title="확대">
				＋
			</button>
			<span>{Math.round(zoom * 100)}%</span>
			<button type="button" onClick={() => runCommandInput('ZOOMOUT')} title="축소">
				－
			</button>
		</div>
	);
};