import React, { useState, useCallback } from 'react';
import classNames from 'classnames';
import { TruncateWithTooltip } from '../truncate-with-tooltip';
import { Tooltip } from '../tooltip';
import { SidebarSubMenu } from './sidebar-submenu';
import { SidebarMenuLink } from './sidebar-menu-link';
import { SidebarMenuItemControls } from './sidebar-menu-item-controls';
import { SidebarMenuItemEditForm } from './sidebar-menu-item-edit-form';
import { defaultLevelsConfig } from './utils';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export function SidebarMenuItem({
  name,
  value,
  itemKey,
  level,
  testId,
  expandedKeys,
  activeKey,
  handleActiveItemChange,
  isExternal,
  isShown,
  isDisabled,
  isEditable,
  isDeletable,
  link,
  route,
  shouldShowActiveBgOnTopLevel,
  onDelete,
  onEdit,
  onChange,
  validity,
  levels = defaultLevelsConfig,
  LinkComponent = SidebarMenuLink,
  subOptions = [],
  onClick = () => {},
  hasErrors = () => '',
  tooltipText = '',
  deleteAriaLabel,
  editAriaLabel,
  editItemInputPlaceholder,
  helperText,
  shouldNotTruncate
}) {
  const [isEditMode, setIsEditMode] = useState(false);
  const onEnterEditMode = useCallback(() => {
    setIsEditMode(true);
  }, []);
  const onExitEditMode = useCallback(() => {
    setIsEditMode(false);
  }, []);
  const getNameMarginClass = useCallback(() => {
    if (onEdit && onDelete && isEditable && isDeletable) {
      return 'margin-right-8';
    }
    if (onEdit && isEditable || onDelete && isDeletable) {
      return 'margin-right-4';
    }
    return '';
  }, [onEdit, onDelete, isEditable, isDeletable]);
  if (isShown === false) {
    return null;
  }
  const nameMarginClass = getNameMarginClass();
  const levelsConfig = {
    ...defaultLevelsConfig,
    ...levels
  };
  const isCollapsible = !levelsConfig?.nonCollapsible?.includes(level);
  const withActiveBackground = shouldShowActiveBgOnTopLevel ? level === 0 : expandedKeys[0] === itemKey;
  const showSubmenu = !!subOptions.length && (!isCollapsible || expandedKeys.includes(itemKey));
  const isActive = itemKey === activeKey || expandedKeys.includes(itemKey);
  const isActionsPresent = !!(onEdit && isEditable) || !!(onDelete && isDeletable);
  return /*#__PURE__*/_jsxs("li", {
    className: classNames('sidebar-menu-item', `sidebar-menu-item-level-${level}`, isActionsPresent && 'with-actions'),
    "test-id": testId,
    children: [/*#__PURE__*/_jsxs("div", {
      className: classNames('sidebar-menu-item-wrapper', {
        'with-active-background': withActiveBackground,
        'sidebar-menu-item-wrapper-disabled': isDisabled
      }),
      "test-id": `sidebar-menu-item-wrapper-${itemKey}`,
      children: [!isEditMode && /*#__PURE__*/_jsxs(_Fragment, {
        children: [/*#__PURE__*/_jsx(LinkComponent, {
          className: classNames('sidebar-menu-link', {
            active: isActive,
            error: hasErrors()
          }),
          itemKey: itemKey,
          onClick: (e, key) => {
            onClick(e, key);
            handleActiveItemChange(e, key);
          },
          hasErrors: hasErrors,
          link: link,
          route: route,
          isExternal: isExternal,
          isDisabled: isDisabled,
          testId: `${testId}-link`,
          children: /*#__PURE__*/_jsxs("span", {
            className: "sidebar-menu-item-container",
            children: [/*#__PURE__*/_jsxs("span", {
              className: "sidebar-menu-item-header",
              children: [!tooltipText && shouldNotTruncate && /*#__PURE__*/_jsx("span", {
                className: classNames(nameMarginClass, value && 'with-value'),
                children: name
              }), !tooltipText && !shouldNotTruncate && /*#__PURE__*/_jsx(TruncateWithTooltip, {
                className: classNames(nameMarginClass, value && 'with-value'),
                children: /*#__PURE__*/_jsx("span", {
                  children: name
                })
              }), tooltipText && /*#__PURE__*/_jsx(Tooltip, {
                content: tooltipText,
                placement: "top",
                children: /*#__PURE__*/_jsx("span", {
                  className: classNames(nameMarginClass, {
                    'sidebar-menu-link-name': !shouldNotTruncate
                  }),
                  children: name
                })
              }), !!value && /*#__PURE__*/_jsx(TruncateWithTooltip, {
                className: classNames('sidebar-menu-link-value', {
                  'should-not-truncate': shouldNotTruncate
                }),
                children: /*#__PURE__*/_jsx("span", {
                  children: value
                })
              })]
            }), !!helperText && /*#__PURE__*/_jsx("span", {
              className: "sidebar-menu-item-helper-text",
              children: helperText
            })]
          })
        }), /*#__PURE__*/_jsx(SidebarMenuItemControls, {
          onDelete: onDelete,
          onEdit: onEnterEditMode,
          isEditable: !!isEditable,
          isDeletable: !!isDeletable,
          itemKey: itemKey,
          level: level,
          deleteAriaLabel: deleteAriaLabel,
          editAriaLabel: editAriaLabel
        })]
      }), isEditMode && !!onEdit && /*#__PURE__*/_jsx(SidebarMenuItemEditForm, {
        initValue: name,
        onExit: onExitEditMode,
        onSubmit: onEdit,
        itemKey: itemKey,
        level: level,
        validity: validity,
        onChange: onChange,
        editItemInputPlaceholder: editItemInputPlaceholder
      })]
    }), showSubmenu && /*#__PURE__*/_jsx(SidebarSubMenu, {
      activeKey: activeKey,
      expandedKeys: expandedKeys,
      subOptions: subOptions,
      level: level + 1,
      levels: levels,
      handleActiveItemChange: handleActiveItemChange,
      testId: `${testId}-submenu`,
      LinkComponent: LinkComponent,
      shouldShowActiveBgOnTopLevel: shouldShowActiveBgOnTopLevel,
      onDelete: onDelete,
      onEdit: onEdit,
      isEditable: isEditable,
      isDeletable: isDeletable,
      onChange: onChange,
      deleteAriaLabel: deleteAriaLabel,
      editAriaLabel: editAriaLabel,
      editItemInputPlaceholder: editItemInputPlaceholder
    })]
  });
}