import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { tcv, Dropdown, IconButton, formatRelativeTime } from "@choiceform/design-system";
import { RoboSmall, AddSmall, TrashSmall } from "@choiceform/icons-react";
import { observer, use$ as useSelector } from "../_vendor/@legendapp/state/react.js";
import { useEventCallback } from "../_vendor/usehooks-ts/dist-index.js";
import { t } from "../i18n/index.js";
import { coreStore$ } from "../stores/core-store.js";
import { messageComputed$ } from "../stores/message-store.js";
const HeaderTv = tcv({
  slots: {
    root: "flex h-10 min-w-0 items-center justify-between px-2",
    title: "truncate pl-2 font-strong",
    headerMessage: "text-secondary-foreground",
    management: "",
    messageCount: "text-secondary-foreground ml-1 font-normal"
  }
});
const Header = observer(function Header2(props) {
  const { onCreateNewChat, onSwitchToChat, onDeleteCurrentChat, availableChats = [] } = props;
  const currentChat = useSelector(coreStore$.currentChat);
  const currentMessages = useSelector(messageComputed$.currentMessages);
  const language = useSelector(coreStore$.ui.language);
  const handleCreateNewChat = useEventCallback(() => {
    if (onCreateNewChat) {
      onCreateNewChat();
    } else {
      console.warn("onCreateNewChat callback not provided");
    }
  });
  const handleSwitchToChat = useEventCallback((chatId) => {
    if (onSwitchToChat) {
      onSwitchToChat(chatId);
    } else {
      console.warn("onSwitchToChat callback not provided");
    }
  });
  const handleDeleteChat = useEventCallback((chatId) => {
    if (onDeleteCurrentChat) {
      onDeleteCurrentChat(chatId);
    } else {
      console.warn("onDeleteCurrentChat callback not provided");
    }
  });
  const chatList = t("header", "chat-list");
  const chatManagement = t("header", "chat-management");
  const deleteCurrentChat = t("header", "delete-current-chat");
  const message = t("header", "message");
  const newChat = t("header", "new-chat");
  const title = t("header", "title");
  const tv = HeaderTv();
  return /* @__PURE__ */ jsxs("div", { className: tv.root(), children: [
    /* @__PURE__ */ jsxs("h1", { className: tv.title(), children: [
      /* @__PURE__ */ jsxs("span", { className: tv.headerMessage(), children: [
        currentChat?.title || title,
        " "
      ] }),
      currentMessages.length > 0 && /* @__PURE__ */ jsx("span", { className: tv.messageCount(), children: `(${currentMessages.length} ${message})` })
    ] }),
    /* @__PURE__ */ jsxs(Dropdown, { selection: true, children: [
      /* @__PURE__ */ jsx(Dropdown.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
        IconButton,
        {
          className: tv.management(),
          tooltip: { content: chatManagement },
          children: /* @__PURE__ */ jsx(RoboSmall, {})
        }
      ) }),
      /* @__PURE__ */ jsxs(Dropdown.Content, { className: "min-w-64", children: [
        /* @__PURE__ */ jsx(Dropdown.Label, { children: chatList }),
        availableChats.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(Dropdown.Divider, {}),
          availableChats.map((chat) => /* @__PURE__ */ jsx(
            Dropdown.Item,
            {
              onClick: () => handleSwitchToChat(chat.id),
              selected: chat.id === currentChat?.id,
              shortcut: {
                keys: formatRelativeTime(new Date(chat.updatedAt), {
                  language
                })
              },
              children: /* @__PURE__ */ jsx(Dropdown.Value, { children: chat.title })
            },
            chat.id
          ))
        ] }),
        /* @__PURE__ */ jsx(Dropdown.Divider, {}),
        /* @__PURE__ */ jsxs(Dropdown.Item, { onClick: handleCreateNewChat, children: [
          /* @__PURE__ */ jsx(AddSmall, {}),
          newChat
        ] }),
        currentChat && /* @__PURE__ */ jsxs(Fragment, { children: [
          /* @__PURE__ */ jsx(Dropdown.Divider, {}),
          /* @__PURE__ */ jsxs(
            Dropdown.Item,
            {
              variant: "danger",
              onClick: () => handleDeleteChat(currentChat.id),
              children: [
                /* @__PURE__ */ jsx(TrashSmall, {}),
                deleteCurrentChat
              ]
            }
          )
        ] })
      ] })
    ] })
  ] });
});
export {
  Header
};
//# sourceMappingURL=header.js.map
