/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { useCallback, useEffect, useState } from 'react';
import {
  $createParagraphNode,
  $getNodeByKey,
  $getRoot,
  $getSelection,
  $isRangeSelection,
  $isRootOrShadowRoot,
  $isTextNode,
  CAN_REDO_COMMAND,
  CAN_UNDO_COMMAND,
  COMMAND_PRIORITY_CRITICAL,
  DEPRECATED_$isGridSelection,
  FORMAT_TEXT_COMMAND,
  REDO_COMMAND,
  SELECTION_CHANGE_COMMAND,
  UNDO_COMMAND,
  type LexicalEditor,
  type NodeKey,
} from 'lexical';
import {
  $createCodeNode,
  $isCodeNode,
  CODE_LANGUAGE_FRIENDLY_NAME_MAP,
  CODE_LANGUAGE_MAP,
  getLanguageFriendlyName,
} from '@lexical/code';
import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link';
import {
  $isListNode,
  INSERT_ORDERED_LIST_COMMAND,
  INSERT_UNORDERED_LIST_COMMAND,
  ListNode,
  REMOVE_LIST_COMMAND,
} from '@lexical/list';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $isDecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
import { INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
import { $createHeadingNode, $createQuoteNode, $isHeadingNode, HeadingTagType } from '@lexical/rich-text';
import { $selectAll, $setBlocksType } from '@lexical/selection';
import {
  $findMatchingParent,
  $getNearestBlockElementAncestorOrThrow,
  $getNearestNodeOfType,
  mergeRegister,
} from '@lexical/utils';

import { Button } from '../../../button';
import { Dialog } from '../../../dialog';
import { DropdownMenu } from '../../../dropdown-menu';
import { IconButton } from '../../../icon-button';
import { Icon } from '../../../iconography';
import { useTr } from '../../i18n';
import type { CrystallizeRichTextActionMenuItem } from '../../types/types';
import { IS_APPLE } from '../../utils/environment';
import { getSelectedNode } from '../../utils/getSelectedNode';
import { sanitizeUrl } from '../../utils/url';
import ActionsPlugin from './../ActionsPlugin';
import { InsertTableDialog } from './insert-table';

const headingTypeToBlockName: Record<HeadingTagType, string> = {
  h1: 'Heading 1',
  h2: 'Heading 2',
  h3: 'Heading 3',
  h4: 'Heading 4',
  h5: 'Heading 5',
  h6: 'Heading 6',
};
const headings = Object.keys(headingTypeToBlockName) as HeadingTagType[];

const blockTypeToBlockName = {
  ...headingTypeToBlockName,
  bullet: 'Bulleted List',
  check: 'Check List',
  code: 'Code Block',
  number: 'Numbered List',
  paragraph: 'Normal',
  quote: 'Quote',
};

function getCodeLanguageOptions(): [string, string][] {
  const options: [string, string][] = [];

  for (const [lang, friendlyName] of Object.entries(CODE_LANGUAGE_FRIENDLY_NAME_MAP)) {
    options.push([lang, friendlyName]);
  }

  return options;
}

const CODE_LANGUAGE_OPTIONS = getCodeLanguageOptions();

function dropDownActiveClass(active: boolean) {
  if (active) return 'active dropdown-item-active';
  else return '';
}

function BlockFormatDropDown({
  editor,
  blockType,
  disabled = false,
}: {
  blockType: keyof typeof blockTypeToBlockName;
  editor: LexicalEditor;
  disabled?: boolean;
}): JSX.Element {
  const formatParagraph = () => {
    if (blockType !== 'paragraph') {
      editor.update(() => {
        const selection = $getSelection();
        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection))
          $setBlocksType(selection, () => $createParagraphNode());
      });
    }
  };

  const formatHeading = (headingSize: HeadingTagType) => {
    if (blockType !== headingSize) {
      editor.update(() => {
        const selection = $getSelection();
        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
          $setBlocksType(selection, () => $createHeadingNode(headingSize));
        }
      });
    }
  };

  const formatBulletList = () => {
    if (blockType !== 'bullet') {
      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
    } else {
      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
    }
  };

  const formatNumberedList = () => {
    if (blockType !== 'number') {
      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
    } else {
      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
    }
  };

  const formatQuote = () => {
    if (blockType !== 'quote') {
      editor.update(() => {
        const selection = $getSelection();
        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
          $setBlocksType(selection, () => $createQuoteNode());
        } else {
          /**
           * Will select the entire editor, in case it is not selected. This is added
           * to get the unit tests working
           */
          $setBlocksType($getRoot().select(), () => $createQuoteNode());
        }
      });
    }
  };

  const formatCode = () => {
    if (blockType !== 'code') {
      editor.update(() => {
        let selection = $getSelection();

        if ($isRangeSelection(selection) || DEPRECATED_$isGridSelection(selection)) {
          if (selection.isCollapsed()) {
            $setBlocksType(selection, () => $createCodeNode());
          } else {
            const textContent = selection.getTextContent();
            const codeNode = $createCodeNode();
            selection.insertNodes([codeNode]);
            selection = $getSelection();
            if ($isRangeSelection(selection)) selection.insertRawText(textContent);
          }
        } else {
          /**
           * Will select the entire editor, in case it is not selected. This is added
           * to get the unit tests working
           */
          $setBlocksType($getRoot().select(), () => $createCodeNode());
        }
      });
    }
  };

  return (
    <DropdownMenu.Root
      disabled={disabled}
      style={{ zIndex: 1 }}
      content={
        <>
          <DropdownMenu.Item onClick={formatParagraph}>
            <i
              className={`c-rte-icon-paragraph c-rte-toolbar__block-format__icon ${
                blockType === 'paragraph' ? 'selected' : ''
              }`}
            />
            <span className={`c-rte-toolbar__block-format__text ${blockType === 'paragraph' ? 'selected' : ''}`}>
              Normal
            </span>
          </DropdownMenu.Item>
          {headings.map(headingSize => (
            <DropdownMenu.Item key={headingSize} onClick={() => formatHeading(headingSize)}>
              <i
                className={`c-rte-icon-${headingSize} c-rte-toolbar__block-format__icon ${
                  blockType === headingSize ? 'selected' : ''
                }`}
              />
              <span className={`c-rte-toolbar__block-format__text ${blockType === headingSize ? 'selected' : ''}`}>
                {headingTypeToBlockName[headingSize]}
              </span>
            </DropdownMenu.Item>
          ))}
          <DropdownMenu.Item onClick={formatBulletList}>
            <i
              className={`c-rte-icon-bullet-list c-rte-toolbar__block-format__icon ${
                blockType === 'bullet' ? 'selected' : ''
              }`}
            />
            <span className={`c-rte-toolbar__block-format__text ${blockType === 'bullet' ? 'selected' : ''}`}>
              Bullet List
            </span>
          </DropdownMenu.Item>
          <DropdownMenu.Item onClick={formatNumberedList}>
            <i
              className={`c-rte-icon-numbered-list c-rte-toolbar__block-format__icon ${
                blockType === 'number' ? 'selected' : ''
              }`}
            />
            <span className={`c-rte-toolbar__block-format__text ${blockType === 'number' ? 'selected' : ''}`}>
              Numbered List
            </span>
          </DropdownMenu.Item>
          <DropdownMenu.Item onClick={formatQuote} data-testid="toggle-block-format-quote">
            <i
              className={`c-rte-icon-quote c-rte-toolbar__block-format__icon ${
                blockType === 'quote' ? 'selected' : ''
              }`}
            />
            <span className={`c-rte-toolbar__block-format__text ${blockType === 'quote' ? 'selected' : ''}`}>
              Quote
            </span>
          </DropdownMenu.Item>
          <DropdownMenu.Item onClick={formatCode} data-testid="toggle-block-format-code">
            <i
              className={`icon c-rte-icon-code c-rte-toolbar__block-format__icon ${
                blockType === 'code' ? 'selected' : ''
              }`}
            />
            <span className={`c-rte-toolbar__block-format__text ${blockType === 'code' ? 'selected' : ''}`}>
              Code block
            </span>
          </DropdownMenu.Item>
        </>
      }
    >
      <Button
        style={{ backgroundColor: 'transparent', padding: '0 8px' }}
        aria-label="Formatting options for text style"
        data-testid="toggle-block-format"
      >
        <i className={`c-rte-toolbar__toggle-icon c-rte-icon-${blockType}`} />
        <Icon.Arrow />
      </Button>
    </DropdownMenu.Root>
  );
}

function Divider(): JSX.Element {
  return <div className="c-rte-toolbar__divider" />;
}

type ToolbarPluginProps = {
  actionsMenuPrepend?: CrystallizeRichTextActionMenuItem[];
  actionsMenuAppend?: CrystallizeRichTextActionMenuItem[];
  disabled?: boolean;
};

export default function ToolbarPlugin({
  actionsMenuPrepend,
  actionsMenuAppend,
  disabled,
}: ToolbarPluginProps): JSX.Element {
  const [editor] = useLexicalComposerContext();
  const [activeEditor, setActiveEditor] = useState(editor);
  const [blockType, setBlockType] = useState<keyof typeof blockTypeToBlockName>('paragraph');
  const [selectedElementKey, setSelectedElementKey] = useState<NodeKey | null>(null);
  const [isLink, setIsLink] = useState(false);
  const [isBold, setIsBold] = useState(false);
  const [isItalic, setIsItalic] = useState(false);
  const [isUnderline, setIsUnderline] = useState(false);
  const [isStrikethrough, setIsStrikethrough] = useState(false);
  const [isSubscript, setIsSubscript] = useState(false);
  const [isSuperscript, setIsSuperscript] = useState(false);
  const [isCode, setIsCode] = useState(false);
  const [canUndo, setCanUndo] = useState(false);
  const [canRedo, setCanRedo] = useState(false);
  const tr = useTr();

  const [codeLanguage, setCodeLanguage] = useState<string>('');
  const [isEditable, setIsEditable] = useState(() => editor.isEditable());

  const updateToolbar = useCallback(() => {
    const selection = $getSelection();
    if ($isRangeSelection(selection)) {
      const anchorNode = selection.anchor.getNode();
      let element =
        anchorNode.getKey() === 'root'
          ? anchorNode
          : $findMatchingParent(anchorNode, e => {
              const parent = e.getParent();
              return parent !== null && $isRootOrShadowRoot(parent);
            });

      if (element === null) {
        element = anchorNode.getTopLevelElementOrThrow();
      }

      const elementKey = element.getKey();
      const elementDOM = activeEditor.getElementByKey(elementKey);

      // Update text format
      setIsBold(selection.hasFormat('bold'));
      setIsItalic(selection.hasFormat('italic'));
      setIsUnderline(selection.hasFormat('underline'));
      setIsStrikethrough(selection.hasFormat('strikethrough'));
      setIsSubscript(selection.hasFormat('subscript'));
      setIsSuperscript(selection.hasFormat('superscript'));
      setIsCode(selection.hasFormat('code'));

      // Update links
      const node = getSelectedNode(selection);
      const parent = node.getParent();
      if ($isLinkNode(parent) || $isLinkNode(node)) {
        setIsLink(true);
      } else {
        setIsLink(false);
      }

      if (elementDOM !== null) {
        setSelectedElementKey(elementKey);
        if ($isListNode(element)) {
          const parentList = $getNearestNodeOfType<ListNode>(anchorNode, ListNode);
          const type = parentList ? parentList.getListType() : element.getListType();
          setBlockType(type);
        } else {
          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
          if (type in blockTypeToBlockName) {
            setBlockType(type as keyof typeof blockTypeToBlockName);
          }
          if ($isCodeNode(element)) {
            const language = element.getLanguage() as keyof typeof CODE_LANGUAGE_MAP;
            setCodeLanguage(language ? CODE_LANGUAGE_MAP[language] || language : '');
            return;
          }
        }
      }
    }
  }, [activeEditor]);

  useEffect(() => {
    return editor.registerCommand(
      SELECTION_CHANGE_COMMAND,
      (_payload, newEditor) => {
        updateToolbar();
        setActiveEditor(newEditor);
        return false;
      },
      COMMAND_PRIORITY_CRITICAL,
    );
  }, [editor, updateToolbar]);

  useEffect(() => {
    return mergeRegister(
      editor.registerEditableListener(editable => {
        setIsEditable(editable);
      }),
      activeEditor.registerUpdateListener(({ editorState }) => {
        editorState.read(() => {
          updateToolbar();
        });
      }),
      activeEditor.registerCommand<boolean>(
        CAN_UNDO_COMMAND,
        payload => {
          setCanUndo(payload);
          return false;
        },
        COMMAND_PRIORITY_CRITICAL,
      ),
      activeEditor.registerCommand<boolean>(
        CAN_REDO_COMMAND,
        payload => {
          setCanRedo(payload);
          return false;
        },
        COMMAND_PRIORITY_CRITICAL,
      ),
    );
  }, [activeEditor, editor, updateToolbar]);

  const clearFormatting = useCallback(() => {
    activeEditor.update(() => {
      const selection = $getSelection();
      if ($isRangeSelection(selection)) {
        $selectAll(selection);
        selection.getNodes().forEach(node => {
          if ($isTextNode(node)) {
            node.setFormat(0);
            node.setStyle('');
            $getNearestBlockElementAncestorOrThrow(node).setFormat('');
          }
          if ($isDecoratorBlockNode(node)) {
            node.setFormat('');
          }
        });
      }
    });
  }, [activeEditor]);

  const insertLink = useCallback(() => {
    if (!isLink) {
      editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl('https://'));
    } else {
      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
    }
  }, [editor, isLink]);

  const onCodeLanguageSelect = useCallback(
    (value: string) => {
      activeEditor.update(() => {
        if (selectedElementKey !== null) {
          const node = $getNodeByKey(selectedElementKey);
          if ($isCodeNode(node)) {
            node.setLanguage(value);
          }
        }
      });
    },
    [activeEditor, selectedElementKey],
  );

  return (
    <div className="c-rte-toolbar">
      <div className="c-rte-toolbar__inner">
        <IconButton
          disabled={!canUndo || !isEditable}
          onClick={() => {
            activeEditor.dispatchCommand(UNDO_COMMAND, undefined);
          }}
          type="button"
          title={tr(IS_APPLE ? 'actionUndoTitleApple' : 'actionUndoTitle')}
          aria-label={tr('actionUndoLabel')}
          data-testid="rich-text-undo-button"
        >
          <i
            className={`c-rte-icon-undo c-rte-toolbar__icon ${!canUndo ? 'disabled' : ''}
        `}
          />
        </IconButton>
        <IconButton
          disabled={!canRedo || !isEditable}
          onClick={() => {
            activeEditor.dispatchCommand(REDO_COMMAND, undefined);
          }}
          type="button"
          title={tr(IS_APPLE ? 'actionRedoTitleApple' : 'actionRedoTitle')}
          aria-label={tr('actionRedoLabel')}
        >
          <i className={`c-rte-icon-redo c-rte-toolbar__icon ${!canRedo ? 'disabled' : ''}`} />
        </IconButton>
        <Divider />
        {blockType in blockTypeToBlockName && activeEditor === editor && (
          <>
            <BlockFormatDropDown disabled={!isEditable} blockType={blockType} editor={editor} />
            <Divider />
          </>
        )}
        {blockType === 'code' ? (
          <>
            <DropdownMenu.Root
              disabled={!isEditable}
              style={{ zIndex: 1 }}
              content={
                <>
                  {CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
                    return (
                      <DropdownMenu.Item
                        className={`item ${dropDownActiveClass(value === codeLanguage)}`}
                        onClick={() => onCodeLanguageSelect(value)}
                        key={value}
                      >
                        <span
                          className={`c-rte-toolbar__code-lang__sel-item ${
                            dropDownActiveClass(value === codeLanguage) ? 'selected' : ''
                          }`}
                        >
                          {name}
                        </span>
                      </DropdownMenu.Item>
                    );
                  })}
                </>
              }
            >
              <Button aria-label={tr('codeSelectLanguage')} append={<Icon.Arrow />}>
                <span className="c-rte-toolbar__code-lang__button-text">{getLanguageFriendlyName(codeLanguage)}</span>
              </Button>
            </DropdownMenu.Root>
          </>
        ) : (
          <Dialog>
            <div className="c-rte-toolbar__actions-rest">
              <IconButton
                disabled={!isEditable}
                className={`c-rte-toolbar__icon-btn ${isBold ? 'selected' : ''}`}
                type="button"
                title={tr(IS_APPLE ? 'actionFormatAsStrongTitleApple' : 'actionFormatAsStrongTitle')}
                aria-label={tr('actionFormatAsStrongLabel')}
                data-testid="toggle-format-bold"
                onClick={() => {
                  activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold');
                }}
              >
                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-bold`} />
              </IconButton>
              <IconButton
                className={`c-rte-toolbar__icon-btn ${isItalic ? 'selected' : ''}`}
                disabled={!isEditable}
                onClick={() => {
                  activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic');
                }}
                type="button"
                title={tr(IS_APPLE ? 'actionFormatAsEmphasizedTitleApple' : 'actionFormatAsEmphasizedTitle')}
                aria-label={tr('actionFormatAsEmphasizedLabel')}
                data-testid="toggle-format-emphasized"
              >
                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-italic`} />
              </IconButton>
              <IconButton
                className={`c-rte-toolbar__icon-btn ${isUnderline ? 'selected' : ''}`}
                disabled={!isEditable}
                onClick={() => {
                  activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline');
                }}
                type="button"
                title={tr(IS_APPLE ? 'actionFormatAsUnderlinedTitleApple' : 'actionFormatAsUnderlinedTitle')}
                aria-label={tr('actionFormatAsUnderlinedLabel')}
                data-testid="toggle-format-underlined"
              >
                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-underline`} />
              </IconButton>
              <IconButton
                className={`c-rte-toolbar__icon-btn ${isCode ? 'selected' : ''}`}
                disabled={!isEditable}
                onClick={() => {
                  activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code');
                }}
                type="button"
                title={tr('actionInsertCodeBlock')}
                aria-label={tr('actionInsertCodeBlock')}
                data-testid="toggle-format-code"
              >
                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-code`} />
              </IconButton>
              <IconButton
                className={`c-rte-toolbar__icon-btn ${isLink ? 'selected' : ''}`}
                disabled={!isEditable}
                onClick={insertLink}
                type="button"
                aria-label={tr('actionInsertlink')}
                title={tr('actionInsertlink')}
              >
                <i className={`c-rte-toolbar__icon-btn__icon c-rte-icon-link`} />
              </IconButton>
              <DropdownMenu.Root
                disabled={!isEditable}
                style={{ zIndex: 1 }}
                content={
                  <>
                    <DropdownMenu.Item
                      disabled={!isEditable}
                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
                      title={tr('actionFormatWithStrikethroughTitle')}
                      aria-label={tr('actionFormatWithStrikethroughLabel')}
                    >
                      <i
                        className={`c-rte-icon-strikethrough c-rte-toolbar__dd-item__icon ${
                          isStrikethrough ? 'selected' : ''
                        }`}
                      />
                      <span className={`c-rte-toolbar__dd-item__text ${isStrikethrough ? 'selected' : ''}`}>
                        {tr('actionFormatWithStrikethroughTitle')}
                      </span>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item
                      disabled={!isEditable}
                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')}
                      title={tr('actionFormatWithSubscriptTitle')}
                      aria-label={tr('actionFormatWithSubscriptLabel')}
                    >
                      <i
                        className={`c-rte-icon-subscript c-rte-toolbar__dd-item__icon ${isSubscript ? 'selected' : ''}`}
                      />
                      <span className={`c-rte-toolbar__dd-item__text ${isSubscript ? 'selected' : ''}`}>
                        {tr('actionFormatWithSubscriptTitle')}
                      </span>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item
                      disabled={!isEditable}
                      onClick={() => activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')}
                      title={tr('actionFormatWithSuperscriptTitle')}
                      aria-label={tr('actionFormatWithSuperscriptLabel')}
                    >
                      <i
                        className={`c-rte-icon-superscript c-rte-toolbar__dd-item__icon ${
                          isSuperscript ? 'selected' : ''
                        }`}
                      />
                      <span className={`c-rte-toolbar__dd-item__text ${isSuperscript ? 'selected' : ''}`}>
                        {tr('actionFormatWithSuperscriptTitle')}
                      </span>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item
                      disabled={!isEditable}
                      onClick={clearFormatting}
                      className="item"
                      title={tr('actionClearTextFormatting')}
                      aria-label={tr('actionClearTextFormatting')}
                    >
                      <i className="c-rte-icon-clear c-rte-toolbar__dd-item__icon" />
                      <span className="c-rte-toolbar__dd-item__text--clear">{tr('actionFormatClear')}</span>
                    </DropdownMenu.Item>
                  </>
                }
              >
                <Button
                  style={{ backgroundColor: 'transparent', padding: '0 8px' }}
                  aria-label={tr('actionTextFormattingOptions')}
                >
                  <i className={`c-rte-icon-dropdown-more c-rte-toolbar__toggle-icon`} />
                  <Icon.Arrow />
                </Button>
              </DropdownMenu.Root>
              <Divider />
              <DropdownMenu.Root
                style={{ zIndex: 1 }}
                disabled={!isEditable}
                content={
                  <>
                    <DropdownMenu.Item
                      onClick={() => {
                        activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
                      }}
                    >
                      <i className="c-rte-toolbar__dd-item__icon c-rte-icon-horizontal-rule" />
                      <span className="c-rte-toolbar__dd-item__text">{tr('horizontalRule')}</span>
                    </DropdownMenu.Item>
                    <DropdownMenu.Item>
                      <Dialog.Trigger asChild>
                        <div className="c-rte-toolbar__dd-item--table">
                          <i className="c-rte-toolbar__dd-item__icon c-rte-icon-table" />
                          <span className="c-rte-toolbar__dd-item__text">{tr('table')}</span>
                        </div>
                      </Dialog.Trigger>
                    </DropdownMenu.Item>
                  </>
                }
              >
                <IconButton>
                  <i className="c-rte-icon-plus c-rte-toolbar__plus" />
                </IconButton>
              </DropdownMenu.Root>
              <Dialog.Content>
                <Dialog.Title>{tr('insertTableTitle')}</Dialog.Title>
                <Dialog.Description>{tr('insertTableDescription')}</Dialog.Description>

                <InsertTableDialog activeEditor={activeEditor} />
              </Dialog.Content>
            </div>
          </Dialog>
        )}
      </div>
      <ActionsPlugin disabled={disabled} prepend={actionsMenuPrepend} append={actionsMenuAppend} />
    </div>
  );
}
