import { NumberSize, Resizable } from 're-resizable';
import { Direction } from 're-resizable/lib/resizer';

import { BuilderModule } from '../../../@types/settings.js';
import { SortableTree } from '../Tree/SortableTree.js';
import { FlattenedItem } from '../Tree/types.js';

import './Navigator.scss';

interface NavigatorProps {
	modules: BuilderModule[];
	currModId: string;
	defaultWidth?: number;
	width: number;
	onResize: (
		e: MouseEvent | TouchEvent,
		direction: Direction,
		navigatorRef: HTMLElement,
		d: NumberSize
	) => void;
	selectModule: (
		id: string,
		e?: React.MouseEvent<HTMLSpanElement, MouseEvent>
	) => void;
	deleteModule: (
		id: string,
		e?: React.MouseEvent<HTMLDivElement, MouseEvent>
	) => void;
	reorderModules: (items: FlattenedItem[]) => void;
	toggleNavigator: () => void;
}

export default function Navigator({
	modules,
	currModId,
	defaultWidth,
	width,
	onResize,
	selectModule,
	deleteModule,
	reorderModules,
	toggleNavigator,
}: NavigatorProps) {
	return (
		<Resizable
			defaultSize={{
				width: defaultWidth ?? 250,
				height: '100vh',
			}}
			onResize={onResize}
			size={{
				width,
				height: '100vh',
			}}
			minWidth={150}
			maxWidth={1000}
			style={{
				position: 'fixed',
				top: 0,
				right: 0,
				zIndex: 1001,
			}}
			enable={{
				top: false,
				right: false,
				bottom: false,
				left: true,
				topRight: false,
				bottomRight: false,
				bottomLeft: false,
				topLeft: false,
			}}
		>
			<div className={`navigator`}>
				<div
					className='navigator__close-btn'
					onClick={toggleNavigator}
				>
					<i className='fa-solid fa-sharp fa-times' />
				</div>
				<div className={`navigator__header`}>Navigator</div>
				<div className={`navigator__tree-container`}>
					<ul className={`navigator__tree-container-inner`}>
						<SortableTree
							treeItems={modules}
							currItemId={currModId}
							collapsible
							indicator
							removable
							onSelect={selectModule}
							onDelete={deleteModule}
							reorderModules={reorderModules}
						/>
					</ul>
				</div>
			</div>
		</Resizable>
	);
}
