import React, { useContext, useState, useEffect, useMemo } from 'react';
import uniqueId from 'lodash-es/uniqueId';
import { Dropdown } from '../../../dropdown';
import { BLOCK_TYPES } from '../../text-editor-constants';
import TextEditorService from '../../text-editor-service';
import TextEditorContext from '../../text-editor-context';
import { TreeNavigationProvider } from '../../../hooks/use-tree-navigation';
import { getMenuTreeNavigationAdapter } from '../../../dropdown-menu/dropdown-menu-content';
import { DropdownMenuTrigger } from '../../../dropdown-menu';
import { TextTypeDropdownContentWrapper } from './text-type-dropdown-content';
import { useTextEditorDefaultTranslations } from '../../text-editor-hooks';
import { jsx as _jsx } from "react/jsx-runtime";
function TextTypeDropdown({
  headingLargeText,
  headingMediumText,
  headingSmallText,
  regularText
}) {
  const defaultTranslations = useTextEditorDefaultTranslations();
  const TEXT_TYPES = [{
    key: BLOCK_TYPES.HEADLINE_LARGE,
    privateKey: BLOCK_TYPES.HEADLINE_LARGE,
    title: headingLargeText ?? defaultTranslations.headingLargeText,
    className: 'large-text-header',
    testId: 'large-text-header'
  }, {
    key: BLOCK_TYPES.HEADLINE_MEDIUM,
    privateKey: BLOCK_TYPES.HEADLINE_MEDIUM,
    title: headingMediumText ?? defaultTranslations.headingMediumText,
    className: 'medium-text-header',
    testId: 'medium-text-header'
  }, {
    key: BLOCK_TYPES.HEADLINE_SMALL,
    privateKey: BLOCK_TYPES.HEADLINE_SMALL,
    title: headingSmallText ?? defaultTranslations.headingSmallText,
    className: 'small-text-header',
    testId: 'small-text-header'
  }, {
    key: BLOCK_TYPES.REGULAR_TEXT,
    privateKey: BLOCK_TYPES.REGULAR_TEXT,
    title: regularText ?? defaultTranslations.regularText,
    className: 'regular-text',
    testId: 'regular-text'
  }];
  const DEFAULT_TEXT_TYPE = BLOCK_TYPES.REGULAR_TEXT;
  const {
    slate,
    slateReact
  } = useContext(TextEditorContext);
  const [selectedType, setSelectedType] = useState(DEFAULT_TEXT_TYPE);
  const textEditorService = new TextEditorService(slate, slateReact);
  const editor = slateReact.useSlate();
  const currentType = getCurrentTextType()?.key || selectedType;
  const selectedItem = TEXT_TYPES.find(item => item.key === selectedType);
  useEffect(() => {
    if (selectedType !== currentType) {
      setSelectedType(currentType);
    }
  }, [currentType]);
  function getCurrentTextType() {
    return TEXT_TYPES.find(({
      key
    }) => textEditorService.isBlockActive(editor, key));
  }
  const uniqueTriggerId = useMemo(() => uniqueId('text-type-dropdown-trigger-'), []);
  const [isKeyboardNavigationDisabled, setIsKeyboardNavigationDisabled] = useState(false);
  const triggerOnClickCallback = (_, isKeyEvent) => {
    if (isKeyEvent) {
      setIsKeyboardNavigationDisabled(false);
    } else {
      setIsKeyboardNavigationDisabled(true);
    }
  };
  const adapter = useMemo(() => getMenuTreeNavigationAdapter({
    isExpandedByDefault: false
  }), []);
  return /*#__PURE__*/_jsx(TreeNavigationProvider, {
    adapter: adapter,
    tree: TEXT_TYPES,
    isDisabled: isKeyboardNavigationDisabled,
    children: /*#__PURE__*/_jsx(Dropdown, {
      hasCustomFocusHandling: true,
      renderAnchor: ({
        ref,
        onClick,
        isOpen
      }) => /*#__PURE__*/_jsx(DropdownMenuTrigger, {
        ref: ref,
        onClick: onClick,
        isOpen: isOpen,
        triggerOptions: {
          triggerClassName: 'text-type-dropdown',
          defaultTriggerText: selectedItem?.title,
          triggerId: uniqueTriggerId,
          triggerTestId: 'text-type-dropdown-trigger',
          triggerOnClickHandler: triggerOnClickCallback
        }
      }),
      children: ({
        closeDropdown
      }) => /*#__PURE__*/_jsx(TextTypeDropdownContentWrapper, {
        closeDropdown: closeDropdown,
        options: TEXT_TYPES,
        selectedKey: selectedType,
        onSelect: option => {
          closeDropdown();
          setIsKeyboardNavigationDisabled(true);
          textEditorService.focus(editor);
          textEditorService.toggleBlock(editor, option.key);
        }
      })
    })
  });
}
export default TextTypeDropdown;