'use strict';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { cn } from '../../../../../fd-toolbox/lib/utils.js';
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../../../../fd-component-toolbox/dropdown-menu/DropdownMenu.js';
import { Icon, defaultSidebarIconName, iconNames } from '../../../../fd-component-toolbox/icon/Icon.js';
import { usePathname, useSearchParams } from '../../../../meta/client/framework/hooks.js';
import { updateActiveLink } from './SidebarDropdownMenu.funcs.js';
import DropdownMenuItemTitle from './DropdownMenuItemTitle.js';
import { Link } from '../../../../fd-component-toolbox/link/Link.js';
import { Button } from '../../../../fd-component-toolbox/button/Button.js';
import { wellKnownPositions } from '../../../../../base-repo/constants/tools-constants.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function SidebarDropdownMenu(t0) {
  const $ = c(19);
  const {
    label,
    icon,
    url,
    openSidebar,
    submenu
  } = t0;
  let result;
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [isActiveLink, setIsActiveLink] = useState(false);
  const [activeDropdown, setActiveDropdown] = useState();
  let t1;
  let t2;
  if ($[0] !== pathname || $[1] !== searchParams || $[2] !== url) {
    t1 = () => {
      if (url) {
        updateActiveLink(setIsActiveLink, pathname, url, searchParams.toString());
      }
    };
    t2 = [url, pathname, searchParams];
    $[0] = pathname;
    $[1] = searchParams;
    $[2] = url;
    $[3] = t1;
    $[4] = t2;
  } else {
    t1 = $[3];
    t2 = $[4];
  }
  useEffect(t1, t2);
  if (!url) {
    return result;
  }
  if (!openSidebar) {
    let t3;
    if ($[5] !== activeDropdown || $[6] !== icon || $[7] !== isActiveLink || $[8] !== label || $[9] !== submenu || $[10] !== url) {
      t3 = jsx(Link, {
        href: url,
        className: "relative",
        children: submenu ? jsxs(Fragment, {
          children: [jsx("div", {
            className: cn("text-fd-tertiary-50 hover:bg-fd-tertiary-700 flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm", isActiveLink && "bg-fd-tertiary-700"),
            onMouseEnter: () => setActiveDropdown(label),
            onMouseLeave: () => setActiveDropdown(void 0),
            children: jsx(Button, {
              variant: "icon",
              className: "p-0",
              children: jsx(Icon, {
                name: icon ?? defaultSidebarIconName,
                color: "text-fd-tertiary-50"
              })
            })
          }), activeDropdown === label && jsx("div", {
            className: "absolute top-[20%] left-full h-4 w-10 items-center",
            onMouseEnter: () => setActiveDropdown(label)
          }), jsx("div", {
            className: cn("cursor-pointer", activeDropdown === label ? "absolute top-0 left-12" : "hidden"),
            onMouseLeave: () => setActiveDropdown(void 0),
            children: jsx(DropdownMenuItemTitle, {
              label,
              url,
              onDropdownCloseChange: () => setActiveDropdown(void 0)
            })
          })]
        }) : jsx("div", {
          onMouseEnter: () => setActiveDropdown(label),
          onMouseLeave: () => setActiveDropdown(void 0),
          children: jsx(Button, {
            variant: "icon",
            className: cn("text-fd-tertiary-50 hover:bg-fd-tertiary-700 flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm", isActiveLink && "bg-fd-tertiary-700"),
            tooltipSide: wellKnownPositions.right,
            tooltipText: label,
            tooltipClassName: "ml-3",
            children: jsx(Icon, {
              name: icon ?? defaultSidebarIconName,
              color: "text-fd-tertiary-50"
            })
          })
        })
      });
      $[5] = activeDropdown;
      $[6] = icon;
      $[7] = isActiveLink;
      $[8] = label;
      $[9] = submenu;
      $[10] = url;
      $[11] = t3;
    } else {
      t3 = $[11];
    }
    return t3;
  }
  let t3;
  if ($[12] !== activeDropdown || $[13] !== icon || $[14] !== isActiveLink || $[15] !== label || $[16] !== submenu || $[17] !== url) {
    t3 = jsx("div", {
      children: submenu ? jsxs(DropdownMenu, {
        open: activeDropdown === label,
        onOpenChange: open => open ? setActiveDropdown(label) : setActiveDropdown(void 0),
        children: [jsx("div", {
          className: "relative",
          children: jsx(DropdownMenuTrigger, {
            nativeButton: false,
            render: props => jsx("div", {
              ...props,
              className: cn("text-fd-tertiary-50 hover:bg-fd-tertiary-700 flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm", isActiveLink && "bg-fd-tertiary-700"),
              children: jsxs("div", {
                className: "flex w-full items-center justify-between gap-3",
                children: [jsxs("div", {
                  className: "flex items-center gap-3",
                  children: [jsx("label", {
                    className: "hover:cursor-pointer [&>svg]:size-4",
                    children: jsx(Icon, {
                      name: icon ?? defaultSidebarIconName,
                      color: "text-fd-tertiary-50"
                    })
                  }), jsx("p", {
                    className: "text-nowrap",
                    children: label
                  })]
                }), jsx(Icon, {
                  name: iconNames.chevronRight,
                  color: "text-fd-tertiary-50",
                  className: "size-4.5 text-nowrap"
                })]
              })
            })
          })
        }), jsx(DropdownMenuContent, {
          className: "bg-fd-tertiary-700 text-fd-tertiary-50 rounded-sm border-none p-0",
          onMouseLeave: () => setActiveDropdown(void 0),
          children: jsx(DropdownMenuItemTitle, {
            label,
            url,
            onDropdownCloseChange: () => setActiveDropdown(void 0)
          })
        })]
      }) : jsx(Link, {
        href: url,
        className: cn("text-fd-tertiary-50 hover:bg-fd-tertiary-700 flex h-9 w-full shrink-0 cursor-pointer items-center justify-start gap-3 rounded-md p-2 text-sm", isActiveLink && "bg-fd-tertiary-700"),
        children: jsx("div", {
          className: "flex w-full items-center justify-between gap-3",
          children: jsxs("div", {
            className: "flex items-center gap-3",
            children: [jsx("label", {
              className: "hover:cursor-pointer [&>svg]:size-4",
              children: jsx(Icon, {
                name: icon ?? defaultSidebarIconName,
                color: "text-fd-tertiary-50"
              })
            }), jsx("p", {
              className: "text-nowrap",
              children: label
            })]
          })
        })
      })
    });
    $[12] = activeDropdown;
    $[13] = icon;
    $[14] = isActiveLink;
    $[15] = label;
    $[16] = submenu;
    $[17] = url;
    $[18] = t3;
  } else {
    t3 = $[18];
  }
  return t3;
}
__name(SidebarDropdownMenu, "SidebarDropdownMenu");

export { SidebarDropdownMenu };
