import React, { useEffect, useRef } from 'react';
import Checkbox from '../Checkbox';
import Radio from '../Radio';
import Text from '../Text';
import { st, classes } from './Selector.st.css.js';
import ExtraText from './ExtraText';
import ProgressBar from './ProgressBar';
import Tooltip from '../Tooltip';
const Selector = React.forwardRef(({ dataHook, size = 'medium', imageSize = 'large', imageShape = 'rectangular', image, toggleType = 'radio', showDivider = false, title, subtitle, extraNode, isSelected = false, isDisabled = false, toggleTooltipProps, indeterminate, showBelowNodeOnSelect, subtitleNode, belowNode, className, id, onToggle = i => i, isActive = false, }, forwardedRef) => {
    const rootRef = useRef(null);
    const toggleRef = useRef(null);
    useEffect(() => {
        if (typeof forwardedRef === 'function') {
            forwardedRef(rootRef.current);
        }
        else if (forwardedRef) {
            forwardedRef.current =
                rootRef.current;
        }
    });
    // Make the toggle input non-focusable (aria-activedescendant pattern)
    useEffect(() => {
        const toggle = toggleRef.current;
        if (!toggle)
            return;
        const wrappedRef = toggle.wrappedComponentRef;
        if (wrappedRef instanceof HTMLInputElement) {
            wrappedRef.tabIndex = -1;
            return;
        }
        const checkboxInput = wrappedRef?.inputRef?.current;
        if (checkboxInput) {
            checkboxInput.tabIndex = -1;
        }
    });
    const onClick = () => !isDisabled && onToggle(id);
    return (React.createElement("li", { ref: rootRef, id: String(id), "data-hook": dataHook, className: st(classes.root, { size, showDivider, isActive }, className), onClick: onClick, role: "option", "aria-selected": isSelected, "data-disabled": isDisabled || undefined, "data-shape": imageShape, "data-size": imageSize, tabIndex: -1 },
        React.createElement("div", { className: st(classes.mainPart, { disabled: isDisabled }) },
            React.createElement(ConditionalTooltip, { toggleTooltipProps: !!isDisabled ? toggleTooltipProps : undefined }, toggleType === 'checkbox' ? (React.createElement(Checkbox, { ref: toggleRef, dataHook: "toggle", checked: isSelected, disabled: isDisabled, indeterminate: indeterminate })) : (React.createElement(Radio, { ref: toggleRef, dataHook: "toggle", checked: isSelected, disabled: isDisabled }))),
            image && (React.createElement("div", { "data-hook": "selector-image", className: st(classes.image, {
                    imageSize,
                    imageShape,
                }), children: image })),
            React.createElement("div", { className: classes.titles },
                React.createElement(Text, { dataHook: "selector-title", size: size, ellipsis: true, children: title }),
                subtitle && (React.createElement(Text, { size: size === 'medium' ? 'small' : 'tiny', secondary: true, dataHook: "selector-subtitle", ellipsis: true, children: subtitle })),
                subtitleNode && (React.createElement("div", { "data-hook": "subtitle-node" }, subtitleNode))),
            extraNode && (React.createElement("div", { className: classes.extra, "data-hook": "selector-extra-node", children: extraNode }))),
        showBelowNodeOnSelect && belowNode && isSelected && (React.createElement("div", { "data-hook": "below-section", className: classes.belowSection }, belowNode))));
});
const ConditionalTooltip = ({ toggleTooltipProps, children, }) => {
    return toggleTooltipProps ? (React.createElement(Tooltip, { content: toggleTooltipProps?.content, disabled: false, dataHook: "toggle-tooltip", enterDelay: toggleTooltipProps.transitionSettings?.openDelay, exitDelay: toggleTooltipProps.transitionSettings?.closeDelay }, children)) : (children);
};
Selector.displayName = 'Selector';
Selector.ExtraText = ExtraText;
Selector.ProgressBar = ProgressBar;
export default Selector;
//# sourceMappingURL=Selector.js.map