import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2023 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import { useRef, useState, useLayoutEffect } from "react";
import { Text } from "@theme-ui/components";
import { Icon, MenuPresenter } from "@notesnook/ui";
import { Icons } from "../icons";
import { useIsMobile, useToolbarLocation } from "../stores/toolbar-store";
import { getToolbarElement } from "../utils/dom";
import { Button } from "../../components/button";
import { usePopupHandler } from "../../components/popup-presenter";
export function Dropdown(props) {
    const { id, group, items, selectedItem, buttonRef, menuWidth, disabled } = props;
    const internalRef = useRef();
    const [isOpen, setIsOpen] = useState(false);
    const toolbarLocation = useToolbarLocation();
    const isMobile = useIsMobile();
    const isBottom = toolbarLocation === "bottom";
    useLayoutEffect(() => () => setIsOpen(false), []);
    const { isPopupOpen } = usePopupHandler({
        group,
        id,
        isOpen,
        onClosed: () => setIsOpen(false)
    });
    return (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "secondary", ref: (ref) => {
                    internalRef.current = ref || undefined;
                    if (buttonRef)
                        buttonRef.current = ref || undefined;
                }, sx: {
                    p: 1,
                    m: 0,
                    bg: isPopupOpen ? "hover" : "transparent",
                    height: "100%",
                    flexShrink: 0,
                    display: "flex",
                    alignItems: "center",
                    ":last-of-type": {
                        mr: 0
                    },
                    ":hover:not(:disabled):not(:active)": !isMobile
                        ? undefined
                        : {
                            bg: "transparent"
                        }
                }, disabled: disabled, onClick: () => setIsOpen((s) => !s), onMouseDown: (e) => e.preventDefault(), children: [typeof selectedItem === "string" ? (_jsx(Text, { sx: {
                            fontSize: "subBody",
                            mr: 1,
                            color: isPopupOpen ? "accent" : "paragraph",
                            flexShrink: 0
                        }, children: selectedItem })) : (selectedItem), _jsx(Icon, { path: isBottom
                            ? isPopupOpen
                                ? Icons.chevronDown
                                : Icons.chevronUp
                            : isPopupOpen
                                ? Icons.chevronUp
                                : Icons.chevronDown, color: isPopupOpen ? "accent" : "paragraph", size: "small" })] }), _jsx(MenuPresenter, { isOpen: isPopupOpen, items: items, onClose: () => setIsOpen(false), position: {
                    target: isBottom
                        ? getToolbarElement()
                        : internalRef.current || "mouse",
                    isTargetAbsolute: true,
                    location: isBottom ? "top" : "below",
                    align: "center",
                    yOffset: 5
                }, blocking: !isMobile, focusOnRender: !isMobile, onMouseDown: (e) => {
                    if (globalThis.keyboardShown) {
                        e.preventDefault();
                    }
                }, sx: {
                    minWidth: menuWidth,
                    maxWidth: isBottom ? "95vw" : "auto",
                    flexDirection: isBottom ? "row" : "column",
                    overflowX: isBottom ? "auto" : "hidden",
                    marginRight: isBottom ? "10px" : 0,
                    display: "flex",
                    alignItems: isBottom ? "center" : "unset",
                    mr: isBottom ? 0 : 2
                } })] }));
}
