import Bold from "@geist-ui/icons/bold"
import Italic from "@geist-ui/icons/italic"
import Link from "@geist-ui/icons/link"
import ImageIcon from "@geist-ui/icons/image"
import { RefObject, useCallback, useMemo } from "react"
import styles from "../document.module.css"
import { Button, ButtonGroup } from "@geist-ui/core"
import { TextareaMarkdownRef } from "textarea-markdown-editor"

// TODO: clean up

const FormattingIcons = ({
	textareaRef
}: {
	textareaRef?: RefObject<TextareaMarkdownRef>
}) => {
	const formattingActions = useMemo(() => {
		const handleBoldClick = () => textareaRef?.current?.trigger("bold")
		const handleItalicClick = () => textareaRef?.current?.trigger("italic")
		const handleLinkClick = () => textareaRef?.current?.trigger("link")
		const handleImageClick = () => textareaRef?.current?.trigger("image")
		return [
			{
				icon: <Bold />,
				name: "bold",
				action: handleBoldClick
			},
			{
				icon: <Italic />,
				name: "italic",
				action: handleItalicClick
			},
			// {
			//     icon: <Underline />,
			//     name: 'underline',
			//     action: handleUnderlineClick
			// },
			{
				icon: <Link />,
				name: "hyperlink",
				action: handleLinkClick
			},
			{
				icon: <ImageIcon />,
				name: "image",
				action: handleImageClick
			}
		]
	}, [textareaRef])

	return (
		<div className={styles.actionWrapper}>
			<ButtonGroup className={styles.actions}>
				{formattingActions.map(({ icon, name, action }) => (
					<Button
						auto
						scale={2 / 3}
						px={0.6}
						aria-label={name}
						key={name}
						icon={icon}
						onMouseDown={(e) => e.preventDefault()}
						onClick={action}
					/>
				))}
			</ButtonGroup>
		</div>
	)
}

export default FormattingIcons