/** @jsxImportSource react */
// deno-lint-ignore no-unused-vars
import React from 'react'
import {
	BoldItalicUnderlineToggles,
	ChangeCodeMirrorLanguage,
	CodeToggle,
	ConditionalContents,
	CreateLink,
	DiffSourceToggleWrapper,
	headingsPlugin,
	InsertCodeBlock,
	InsertFrontmatter,
	InsertImage,
	InsertTable,
	InsertThematicBreak,
	ListsToggle,
	markdownShortcutPlugin,
	MDXEditor,
	Separator,
	StrikeThroughSupSubToggles,
	toolbarPlugin,
	UndoRedo,
} from '@mdxeditor/editor'

export default function MdxEditor(props: { markdown?: string }) {
	return (
		<MDXEditor
			markdown={props.markdown ?? ''}
			plugins={[
				headingsPlugin(),
				markdownShortcutPlugin(),
				toolbarPlugin({
					toolbarContents: () => <KitchenSinkToolbar />,
				}),
			]}
		/>
	)
}

function KitchenSinkToolbar() {
	return (
		<DiffSourceToggleWrapper>
			<ConditionalContents
				options={[
					{
						when: (editor: Record<string, unknown>) =>
							editor?.editorType === 'codeblock',
						contents: () => <ChangeCodeMirrorLanguage />,
					},
					{
						fallback: () => (
							<>
								<UndoRedo />
								<Separator />
								<BoldItalicUnderlineToggles />
								<CodeToggle />
								<Separator />
								<StrikeThroughSupSubToggles />
								<Separator />
								<ListsToggle />
								<Separator />

								<CreateLink />
								<InsertImage />

								<Separator />

								<InsertTable />
								<InsertThematicBreak />

								<Separator />
								<InsertCodeBlock />

								<Separator />
								<InsertFrontmatter />
							</>
						),
					},
				]}
			/>
		</DiffSourceToggleWrapper>
	)
}