import { defineMessages } from '@tldraw/editor'
import { ReactNode, memo } from 'react'
import { PORTRAIT_BREAKPOINT } from '../../constants'
import { useBreakpoint } from '../../context/breakpoints'
import { useReadonly } from '../../hooks/useReadonly'
import { useTranslation } from '../../hooks/useTranslation/useTranslation'
import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
import { useTldrawUiOrientation } from '../primitives/layout'
import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
import {
	TldrawUiPopover,
	TldrawUiPopoverContent,
	TldrawUiPopoverTrigger,
} from '../primitives/TldrawUiPopover'
import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'

const messages = defineMessages({
	actionsMenuTitle: { id: 'actions-menu.title', defaultMessage: 'Actions' },
})

/** @public */
export interface TLUiActionsMenuProps {
	children?: ReactNode
}

/** @public @react */
export const DefaultActionsMenu = memo(function DefaultActionsMenu({
	children,
}: TLUiActionsMenuProps) {
	const msg = useTranslation()
	const breakpoint = useBreakpoint()
	const isReadonlyMode = useReadonly()
	const { orientation } = useTldrawUiOrientation()

	const content = children ?? <DefaultActionsMenuContent />

	// Every default action edits shapes, so in readonly mode the menu would open empty
	if (isReadonlyMode) return

	return (
		<TldrawUiPopover id="actions-menu">
			<TldrawUiPopoverTrigger>
				<TldrawUiToolbarButton
					type="icon"
					data-testid="actions-menu.button"
					title={msg(messages.actionsMenuTitle)}
				>
					<TldrawUiButtonIcon
						icon={orientation === 'horizontal' ? 'dots-vertical' : 'dots-horizontal'}
						small
					/>
				</TldrawUiToolbarButton>
			</TldrawUiPopoverTrigger>
			<TldrawUiPopoverContent
				side={
					orientation === 'horizontal'
						? breakpoint >= PORTRAIT_BREAKPOINT.TABLET
							? 'bottom'
							: 'top'
						: 'right'
				}
				sideOffset={6}
			>
				<TldrawUiToolbar
					label={msg(messages.actionsMenuTitle)}
					className="tlui-actions-menu"
					data-testid="actions-menu.content"
					orientation="grid"
				>
					<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
						{content}
					</TldrawUiMenuContextProvider>
				</TldrawUiToolbar>
			</TldrawUiPopoverContent>
		</TldrawUiPopover>
	)
})