'use strict';
'use client';
import { c } from 'react/compiler-runtime';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect, Suspense } from 'react';
import { useIsMobile } from '../../../../fd-toolbox/hooks/use-is-mobile.js';
import { UserDropdownMenu } from '../../menu/user-dropdown-menu/UserDropdownMenu.js';
import { Separator } from '../../../fd-component-toolbox/separator/Separator.js';
import { cn } from '../../../../fd-toolbox/lib/utils.js';
import { performLogout, setToolbarSubgroups } from './Toolbar.funcs.js';
import { Button } from '../../../fd-component-toolbox/button/Button.js';
import { useAsyncEffect } from '../../../../fd-toolbox/hooks/use-async-effect.js';
import { NotificationMenu } from '../../menu/notifications-menu/NotificationMenu.js';
import { HamburgerMenu } from './hamburger-menu/HamburgerMenu.js';
import { Icon, iconNames } from '../../../fd-component-toolbox/icon/Icon.js';
import { Search } from '../../search/Search.js';
import { useTitle } from '../../../meta/page/use-title.js';
import { Image } from '../../../fd-component-toolbox/image/Image.js';
import { Link } from '../../../fd-component-toolbox/link/Link.js';
import TopNav from './TopNav.js';
import { toolbarLayoutTypes } from '../client-layout/client-layout-config.js';
import { elements } from '../../../../fd-toolbox/constants/elements.js';
import { useAuth } from '../../providers/auth-provider/AuthProvider.js';
import { getUserDropDownMenuTriggerId } from '../../menu/user-dropdown-menu/UserDropdownMenu.funcs.js';
import { useRouter } from '../../../meta/client/framework/hooks.js';
import { routes } from '../../../../fd-toolbox/routing/routes.js';
import { useOptionalPromise } from '../../../../fd-toolbox/hooks/use-optional-promise.js';
import { firstOrUndefined } from '../../../../fd-toolbox/server/collections/single-funcs.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Toolbar(t0) {
  const $ = c(25);
  const {
    className,
    config,
    userSettings,
    visibleWorkspaces,
    userWorkspaces,
    notifications
  } = t0;
  const t1 = useOptionalPromise(userSettings) ?? [];
  let t2;
  if ($[0] !== t1) {
    t2 = firstOrUndefined(t1);
    $[0] = t1;
    $[1] = t2;
  } else {
    t2 = $[1];
  }
  const userSettingsValue = t2;
  let t3;
  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
    t3 = [];
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  const [menuSubgroups, setMenuSubgroups] = useState(t3);
  const {
    title
  } = useTitle();
  const authContext = useAuth();
  const [contextTitle, setContextTitle] = useState();
  const router = useRouter();
  const isMobile = useIsMobile();
  let t4;
  let t5;
  if ($[3] !== title) {
    t4 = () => {
      setContextTitle(title);
    };
    t5 = [title];
    $[3] = title;
    $[4] = t4;
    $[5] = t5;
  } else {
    t4 = $[4];
    t5 = $[5];
  }
  useEffect(t4, t5);
  let t6;
  if ($[6] !== router) {
    t6 = __name(async () => performLogout(router), "onLogout");
    $[6] = router;
    $[7] = t6;
  } else {
    t6 = $[7];
  }
  const onLogout = t6;
  let t7;
  if ($[8] !== onLogout || $[9] !== userSettingsValue) {
    t7 = async () => {
      setToolbarSubgroups(setMenuSubgroups, userSettingsValue, onLogout);
    };
    $[8] = onLogout;
    $[9] = userSettingsValue;
    $[10] = t7;
  } else {
    t7 = $[10];
  }
  let t8;
  if ($[11] !== authContext.loginState || $[12] !== onLogout || $[13] !== userSettingsValue) {
    t8 = [authContext.loginState, onLogout, userSettingsValue];
    $[11] = authContext.loginState;
    $[12] = onLogout;
    $[13] = userSettingsValue;
    $[14] = t8;
  } else {
    t8 = $[14];
  }
  useAsyncEffect(t7, t8);
  const compactMode = config.toolbarLayout === toolbarLayoutTypes.topBarOnly;
  let t9;
  if ($[15] !== authContext.loginState.loggedIn || $[16] !== className || $[17] !== compactMode || $[18] !== contextTitle || $[19] !== isMobile || $[20] !== menuSubgroups || $[21] !== notifications || $[22] !== userWorkspaces || $[23] !== visibleWorkspaces) {
    t9 = jsx("header", {
      id: elements.toolbar,
      children: authContext.loginState.loggedIn && jsxs("div", {
        className: cn("bg-fd-tertiary-900 flex h-11 items-center justify-between pr-4", className),
        children: [jsxs("div", {
          className: "flex grow items-center",
          children: [isMobile && jsxs("div", {
            className: "flex items-center",
            children: [jsx(HamburgerMenu, {
              userWorkspaces,
              visibleWorkspaces
            }), jsx(Separator, {
              orientation: "vertical",
              className: "bg-fd-tertiary-600 mx-4 hidden h-6 md:block"
            })]
          }), jsx("div", {
            className: "mx-2 my-1 mt-2.5 flex min-w-10 items-center justify-center rounded-md p-0.5 max-md:hidden",
            children: jsx(Link, {
              href: routes.root,
              children: jsx(Image, {
                src: "/logo.svg",
                alt: "logo",
                width: 26,
                height: 26
              })
            })
          }), jsx("div", {
            className: cn("relative w-fit", compactMode ? "max-w-60" : "max-w-sm md:w-full"),
            children: jsx("form", {
              onSubmit: _temp,
              className: "flex w-full items-center",
              children: jsx(Search, {
                parentContextName: elements.toolbar,
                compactMode
              })
            })
          }), contextTitle && jsx("div", {
            className: "mx-4 flex grow flex-row items-center justify-center md:flex-none md:justify-start",
            children: jsx("div", {
              className: "text-fd-tertiary-50 cursor-default text-sm",
              children: contextTitle
            })
          }), jsxs("div", {
            className: cn("flex-row items-center", compactMode ? "hidden lg:flex" : "hidden"),
            children: [jsx(Separator, {
              orientation: "vertical",
              className: "bg-fd-tertiary-600 mx-4 h-6"
            }), jsx(TopNav, {})]
          })]
        }), jsxs("div", {
          className: "flex flex-row items-center",
          children: [jsx(Separator, {
            orientation: "vertical",
            className: "bg-fd-tertiary-600 mx-4 hidden h-6 md:block"
          }), jsxs("div", {
            className: "flex flex-row space-x-2",
            children: [jsx(Link, {
              href: "https://share.hsforms.com/1Lo6k-t0WSZuOKxA2SqVVjgd42d4",
              className: "flex size-8 items-center",
              children: jsx(Button, {
                variant: "icon",
                className: "hover:bg-fd-tertiary-700 flex size-full items-center justify-center rounded-md p-2",
                tooltipText: "Create ticket",
                tooltipClassName: "mt-2",
                children: jsx(Icon, {
                  color: "color-white",
                  name: iconNames.questionMarkCircledIcon,
                  className: "text-fd-tertiary-50 size-4"
                })
              })
            }), jsx(Suspense, {
              children: jsx(NotificationMenu, {
                parentContextName: elements.toolbar,
                notifications
              })
            })]
          }), jsxs("div", {
            className: "hidden flex-row items-center md:flex",
            children: [jsx(Separator, {
              orientation: "vertical",
              className: "bg-fd-tertiary-600 mx-4 h-6"
            }), jsx(UserDropdownMenu, {
              id: getUserDropDownMenuTriggerId(elements.toolbar),
              items: menuSubgroups,
              userWorkspaces,
              visibleWorkspaces,
              parentContextName: elements.toolbar
            })]
          })]
        })]
      })
    });
    $[15] = authContext.loginState.loggedIn;
    $[16] = className;
    $[17] = compactMode;
    $[18] = contextTitle;
    $[19] = isMobile;
    $[20] = menuSubgroups;
    $[21] = notifications;
    $[22] = userWorkspaces;
    $[23] = visibleWorkspaces;
    $[24] = t9;
  } else {
    t9 = $[24];
  }
  return t9;
}
function _temp(event) {
  return event.preventDefault();
}
__name(Toolbar, "Toolbar");

export { Toolbar };
