import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from "classnames";
import { IconDataSource } from "@gooddata/sdk-ui-kit";
import { PermissionsDropdown } from "./PermissionsDropdown.js";
import { usePermissionsDropdownState } from "./usePermissionsDropdownState.js";
function DataSourceIcon() {
    return (_jsx("div", { className: "gd-grantee-item-icon-left-background", children: _jsx("span", { className: "gd-grantee-item-icon gd-grantee-item-icon-left", children: _jsx(IconDataSource, {}) }) }));
}
export function DataSourceItem({ dataSource, subjectType, onChange, onDelete, renderDataSourceIcon, }) {
    const { isDropdownOpen, toggleDropdown } = usePermissionsDropdownState();
    const itemClassName = cx("s-user-management-data-source-item", "gd-share-dialog-grantee-item", {
        "is-active": isDropdownOpen,
    });
    return (_jsxs("div", { className: itemClassName, children: [_jsx(PermissionsDropdown, { dataSource: dataSource, subjectType: subjectType, isDropdownOpen: isDropdownOpen, toggleDropdown: toggleDropdown, onChange: onChange, onDelete: onDelete, className: "gd-grantee-granular-permission" }), _jsx("div", { className: "gd-grantee-content", children: _jsx("div", { className: "gd-grantee-content-label", children: dataSource.title }) }), renderDataSourceIcon ? renderDataSourceIcon(dataSource) : _jsx(DataSourceIcon, {})] }));
}
//# sourceMappingURL=DataSourceItem.js.map