"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarPopoverItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const forwardRefWithGeneric_1 = require("../../forwardRefWithGeneric");
const Tooltip_1 = require("../../Tooltip");
const Typography_1 = require("../../Typography");
const getInertProps_1 = require("../../utils/getInertProps");
const constants_1 = require("./constants");
const styles_1 = require("./styles");
const useLogic_1 = require("./useLogic");
const SidebarPopoverItemInner = ({ icon, title, description, component, isDisabled, disabledReason, onClick, ...props }, ref) => {
    const Component = component ?? 'div';
    const { handleItemClick } = (0, useLogic_1.useLogic)({ onClick });
    return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { withoutContainer: !isDisabled, title: isDisabled && disabledReason, placement: "bottom", children: (0, jsx_runtime_1.jsx)(styles_1.Item, { onClick: handleItemClick, ...(0, getInertProps_1.getInertProps)(isDisabled), "$isDisabled": isDisabled, children: (0, jsx_runtime_1.jsx)(Component, { ref: ref, ...props, className: constants_1.sidebarPopoverItemClassnames.content, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$hasDescription": Boolean(description), children: [icon && (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { children: icon }), (0, jsx_runtime_1.jsxs)(styles_1.ItemWrapper, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "subtitle1", children: title }), description && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { color: "textSecondary", variant: "body1", children: description }))] })] }) }) }) }) }));
};
exports.SidebarPopoverItem = (0, forwardRefWithGeneric_1.forwardRefWithGeneric)(SidebarPopoverItemInner);
