import { Editor } from '@tiptap/react';

import ButtonGroup from './Buttons/ButtonGroup';
import Button from './Buttons/Button';
import Headings from './Headings/Headings';

import * as S from './styles';

export interface IToolbarProps {
	editor: Editor | null;
	toggleMediaLibrary: () => void;
}

type IToolbarButtons = Array<string | Array<string>>;

const buttons = [
	['Bold', 'Italic', 'Underline', 'Strike'],
	['Strong', 'Emphasis'],
	['Link', 'Image'],
	['BulletList', 'OrderedList', 'TaskList'],
	['Code', 'CodeBlock', 'BlockQuote'],
	['Alert', 'Button', 'StepByStep'],
	['Table', 'Column before', 'Column after', 'Row before', 'Row after', 'Delete row', 'Delete column', 'Merge cells'],
	'htmlsource'
] satisfies IToolbarButtons;

const Toolbar = ({ editor, toggleMediaLibrary }: IToolbarProps): JSX.Element => {
	if (!editor || buttons.length < 1) return <></>;

	return (
		<S.Wrapper hasRadius>
			<Headings editor={editor} />
			{buttons.map((item, index) => {
				const isGroup = Array.isArray(item);

				if (isGroup) {
					return (
						<ButtonGroup
							key={`button-group__${index}`}
							editor={editor}
							items={item}
							toggleMediaLibrary={toggleMediaLibrary}
						/>
					);
				}

				return <Button key={item} editor={editor} identifier={item} toggleMediaLibrary={toggleMediaLibrary} />;
			})}
		</S.Wrapper>
	);
};

export default Toolbar;