"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash-es/uniqueId"));
var _dropdown = require("../../../dropdown");
var _textEditorConstants = require("../../text-editor-constants");
var _textEditorService = _interopRequireDefault(require("../../text-editor-service"));
var _textEditorContext = _interopRequireDefault(require("../../text-editor-context"));
var _useTreeNavigation = require("../../../hooks/use-tree-navigation");
var _dropdownMenuContent = require("../../../dropdown-menu/dropdown-menu-content");
var _dropdownMenu = require("../../../dropdown-menu");
var _textTypeDropdownContent = require("./text-type-dropdown-content");
var _textEditorHooks = require("../../text-editor-hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function TextTypeDropdown({
  headingLargeText,
  headingMediumText,
  headingSmallText,
  regularText
}) {
  const defaultTranslations = (0, _textEditorHooks.useTextEditorDefaultTranslations)();
  const TEXT_TYPES = [{
    key: _textEditorConstants.BLOCK_TYPES.HEADLINE_LARGE,
    privateKey: _textEditorConstants.BLOCK_TYPES.HEADLINE_LARGE,
    title: headingLargeText ?? defaultTranslations.headingLargeText,
    className: 'large-text-header',
    testId: 'large-text-header'
  }, {
    key: _textEditorConstants.BLOCK_TYPES.HEADLINE_MEDIUM,
    privateKey: _textEditorConstants.BLOCK_TYPES.HEADLINE_MEDIUM,
    title: headingMediumText ?? defaultTranslations.headingMediumText,
    className: 'medium-text-header',
    testId: 'medium-text-header'
  }, {
    key: _textEditorConstants.BLOCK_TYPES.HEADLINE_SMALL,
    privateKey: _textEditorConstants.BLOCK_TYPES.HEADLINE_SMALL,
    title: headingSmallText ?? defaultTranslations.headingSmallText,
    className: 'small-text-header',
    testId: 'small-text-header'
  }, {
    key: _textEditorConstants.BLOCK_TYPES.REGULAR_TEXT,
    privateKey: _textEditorConstants.BLOCK_TYPES.REGULAR_TEXT,
    title: regularText ?? defaultTranslations.regularText,
    className: 'regular-text',
    testId: 'regular-text'
  }];
  const DEFAULT_TEXT_TYPE = _textEditorConstants.BLOCK_TYPES.REGULAR_TEXT;
  const {
    slate,
    slateReact
  } = (0, _react.useContext)(_textEditorContext.default);
  const [selectedType, setSelectedType] = (0, _react.useState)(DEFAULT_TEXT_TYPE);
  const textEditorService = new _textEditorService.default(slate, slateReact);
  const editor = slateReact.useSlate();
  const currentType = getCurrentTextType()?.key || selectedType;
  const selectedItem = TEXT_TYPES.find(item => item.key === selectedType);
  (0, _react.useEffect)(() => {
    if (selectedType !== currentType) {
      setSelectedType(currentType);
    }
  }, [currentType]);
  function getCurrentTextType() {
    return TEXT_TYPES.find(({
      key
    }) => textEditorService.isBlockActive(editor, key));
  }
  const uniqueTriggerId = (0, _react.useMemo)(() => (0, _uniqueId.default)('text-type-dropdown-trigger-'), []);
  const [isKeyboardNavigationDisabled, setIsKeyboardNavigationDisabled] = (0, _react.useState)(false);
  const triggerOnClickCallback = (_, isKeyEvent) => {
    if (isKeyEvent) {
      setIsKeyboardNavigationDisabled(false);
    } else {
      setIsKeyboardNavigationDisabled(true);
    }
  };
  const adapter = (0, _react.useMemo)(() => (0, _dropdownMenuContent.getMenuTreeNavigationAdapter)({
    isExpandedByDefault: false
  }), []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_useTreeNavigation.TreeNavigationProvider, {
    adapter: adapter,
    tree: TEXT_TYPES,
    isDisabled: isKeyboardNavigationDisabled,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.Dropdown, {
      hasCustomFocusHandling: true,
      renderAnchor: ({
        ref,
        onClick,
        isOpen
      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.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__*/(0, _jsxRuntime.jsx)(_textTypeDropdownContent.TextTypeDropdownContentWrapper, {
        closeDropdown: closeDropdown,
        options: TEXT_TYPES,
        selectedKey: selectedType,
        onSelect: option => {
          closeDropdown();
          setIsKeyboardNavigationDisabled(true);
          textEditorService.focus(editor);
          textEditorService.toggleBlock(editor, option.key);
        }
      })
    })
  });
}
var _default = exports.default = TextTypeDropdown;