/** 블록 라이브러리 팔레트 — 저장한 블록을 고르면 삽입 도구가 켜진다 (INSERT/BLOCK) */
import type { FC } from 'react';
import {
	deleteBlock,
	exportBlocksToFile,
	getBlocks,
	importBlocksFromFile,
} from '../blocks/block-library';
import { pickFile } from '../helpers/pick-file';
import { startBlockInsert } from '../tools/insert-block-tool';
import { isBlockLibraryVisible, setBlockLibraryVisible } from './ui-state';

export const BlockLibraryPanel: FC = () => {
	if (!isBlockLibraryVisible()) return null;

	const blocks = getBlocks();

	return (
		<div className="cad-block-library controls">
			<div className="cad-quick-properties__header">
				<span>블록 라이브러리</span>
				<button type="button" onClick={() => setBlockLibraryVisible(false)} title="닫기">
					✕
				</button>
			</div>

			{blocks.length === 0 ? (
				<p className="cad-block-library__empty">객체를 선택하고 BLOCK 명령으로 저장하십시오.</p>
			) : (
				<ul className="cad-block-library__list">
					{blocks.map((block) => (
						<li key={block.name}>
							<button
								type="button"
								className="cad-block-library__name"
								title={`객체 ${block.entities.length}개 — 클릭하면 삽입`}
								onClick={() => {
									setBlockLibraryVisible(false);
									void startBlockInsert(block);
								}}
							>
								{block.name}
							</button>
							<button
								type="button"
								title="삭제"
								onClick={() => {
									if (window.confirm(`블록 '${block.name}'을 삭제하시겠습니까?`)) {
										deleteBlock(block.name);
									}
								}}
							>
								✕
							</button>
						</li>
					))}
				</ul>
			)}

			<div className="cad-block-library__actions">
				<button type="button" onClick={() => exportBlocksToFile()}>
					파일로 내보내기
				</button>
				<button
					type="button"
					onClick={() => pickFile('application/json', (file) => importBlocksFromFile(file))}
				>
					파일에서 가져오기
				</button>
			</div>
		</div>
	);
};