import React, { useEffect } from "react";
import { IBlock } from "../BlockList/Block";
import classes from "./classes.module.scss";
import Dropdown from "../../Dropdown";
import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
type IProps = {
	blocks: IBlock[];
	onSelectedBlock: (block: IBlock) => void;
	defaultSelectedBlock?: IBlock;
};

export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) {
	const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null);

	useEffect(() => {
		if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock);
	}, [defaultSelectedBlock]);

	return (
		<div className={classes["root"]}>
			<Dropdown
				options={blocks.map((block) => {
					return {
						id: block.id,
						label: {
							subtext: block.primaryText,
							text: block.secondaryText,
						},
					} as IOption;
				})}
				selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined}
			/>
		</div>
	);
}