/** 제목표시줄 + 빠른 실행 도구막대 (AutoCAD 상단 막대) */
import { type FC, useEffect, useState } from 'react';
import { HtmlEvent } from '../App.types';
import { getCommandById } from '../commands/registry';
import { runCommand } from '../commands/run-command';
import { QUICK_ACCESS_COMMANDS } from '../ribbon/ribbon.config';
import { getHostTitle, isHostSave } from '../state';

export const QuickAccessBar: FC = () => {
	const [hostTitle, setTitle] = useState(getHostTitle());
	useEffect(() => {
		const refresh = () => setTitle(getHostTitle());
		window.addEventListener(HtmlEvent.UPDATE_STATE, refresh);
		return () => window.removeEventListener(HtmlEvent.UPDATE_STATE, refresh);
	}, []);
	// 부모 페이지가 저장·이름을 맡는 M02 에선 제목 줄을 숨겨 그림 칸을 넓힌다.
	if (isHostSave()) return null;
	return (
	<header className="cad-titlebar controls">
		<div className="cad-brand">
			<strong>Aislo CAD</strong>
			<span>{hostTitle}</span>
		</div>
		<div className="cad-quick-access">
			{QUICK_ACCESS_COMMANDS.map((id) => {
				const command = getCommandById(id);
				if (!command) return null;
				return (
					<button
						type="button"
						key={command.id}
						title={`${command.label} (${command.id})`}
						onClick={() => runCommand(command)}
					>
						<span aria-hidden>{command.glyph}</span>
					</button>
				);
			})}
		</div>
		<div className="cad-file-state">
			<span className="cad-file-state__dot" />
			현재 도면
		</div>
	</header>
);
};