/** 좌측 팔레트 — 특성(PROPERTIES)과 도면층 관리자 (AutoCAD 팔레트 자리) */
import type { FC } from 'react';
import { LayerManager } from './LayerManager';
import { PropertiesEditor } from './PropertiesEditor';
import { getInspectorTab, openInspector } from './ui-state';
import { getActiveLayerId, getLayers, setActiveLayerId, setLayers } from '../state';

interface InspectorPanelProps {
	collapsed: boolean;
	onToggleCollapsed: () => void;
}

export const InspectorPanel: FC<InspectorPanelProps> = ({ collapsed, onToggleCollapsed }) => {
	const tab = getInspectorTab();
	const layers = getLayers();
	const activeLayerId = getActiveLayerId();

	return (
		<aside className="cad-inspector controls" data-collapsed={collapsed}>
			<button
				className="cad-inspector__collapse"
				type="button"
				onClick={onToggleCollapsed}
				title={collapsed ? '패널 펼치기' : '패널 접기'}
			>
				{collapsed ? '›' : '‹'}
			</button>
			{!collapsed && (
				<>
					<div className="cad-inspector-tabs">
						<button
							type="button"
							data-active={tab === 'properties'}
							onClick={() => openInspector('properties')}
						>
							특성
						</button>
						<button
							type="button"
							data-active={tab === 'layers'}
							onClick={() => openInspector('layers')}
						>
							도면층
						</button>
					</div>
					{tab === 'properties' ? (
						<div className="cad-properties">
							<PropertiesEditor />
						</div>
					) : (
						<LayerManager
							className="cad-layer-manager"
							layers={layers}
							activeLayerId={activeLayerId}
							setLayers={(next) => setLayers(next)}
							setActiveLayerId={(id) => setActiveLayerId(id)}
						/>
					)}
				</>
			)}
		</aside>
	);
};