import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2023-2026 GoodData Corporation
import { useCallback, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { withBubble } from "@gooddata/sdk-ui-kit";
import { simplifyText } from "@gooddata/util";
import { dataSourcePermissionMessages } from "./locales.js";
import { PermissionsDropdownList } from "./PermissionsDropdownList.js";
import { useTelemetry } from "../TelemetryContext.js";
const items = [
    {
        id: "MANAGE",
        enabled: true,
    },
    {
        id: "USE",
        enabled: true,
    },
];
const trackPermissionChange = (trackEvent, subjectType, permission) => {
    switch (permission) {
        case "USE":
            trackEvent(subjectType === "user"
                ? "user-data-source-permission-changed-to-use"
                : "group-data-source-permission-changed-to-use");
            break;
        case "MANAGE":
            trackEvent(subjectType === "user"
                ? "user-data-source-permission-changed-to-manage"
                : "group-data-source-permission-changed-to-manage");
            break;
    }
};
function Dropdown({ dataSource, subjectType, isDropdownDisabled, isDropdownOpen, toggleDropdown, onChange, onDelete, className, }) {
    const intl = useIntl();
    const [selectedPermission, setSelectedPermission] = useState(dataSource.permission);
    const trackEvent = useTelemetry();
    const handleOnSelect = (permission) => {
        onChange?.({ ...dataSource, permission });
        trackPermissionChange(trackEvent, subjectType, permission);
        setSelectedPermission(permission);
    };
    const handleOnDelete = () => {
        onDelete?.(dataSource);
    };
    const handleClick = useCallback(() => {
        if (!isDropdownDisabled) {
            toggleDropdown();
        }
    }, [isDropdownDisabled, toggleDropdown]);
    const buttonValue = intl.formatMessage(dataSourcePermissionMessages[selectedPermission]);
    return (_jsxs("div", { className: className, children: [
            _jsx("div", { className: cx("s-user-management-permission-button", "gd-granular-permission-button", "dropdown-button", `gd-granular-permission-button-${simplifyText(dataSource.id)}`, {
                    "is-active": isDropdownOpen,
                    "gd-icon-navigateup": !isDropdownDisabled && isDropdownOpen,
                    "gd-icon-navigatedown": !isDropdownDisabled && !isDropdownOpen,
                    disabled: isDropdownDisabled,
                    "gd-icon-right": !isDropdownDisabled,
                }), onClick: handleClick, "aria-label": "Share dialog granular permissions button", children: _jsx("div", { className: "s-user-management-button-title gd-granular-permission-button-title", children: buttonValue }) }), _jsx(PermissionsDropdownList, { selectedPermission: selectedPermission, items: items, subjectType: subjectType, onSelect: handleOnSelect, onDelete: handleOnDelete, toggleDropdown: toggleDropdown, isShowDropdown: isDropdownOpen, alignTo: `.gd-granular-permission-button-${simplifyText(dataSource.id)}` })
        ] }));
}
export const PermissionsDropdown = withBubble(Dropdown);
//# sourceMappingURL=PermissionsDropdown.js.map