import React, { useCallback } from 'react';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import Radio from '../../Radio';
import Text from '../../Text';
import Collapse from '../../Collapse';
import Divider from '../../Divider';
import { dataHooks, TYPES } from '../constants';
import { isString } from '../../utils/StringUtils';
import { useHover } from '../../common/useHover';
import { st, classes } from './Item.st.css.js';
const renderTitle = title => {
    if (isString(title)) {
        return (React.createElement(Text, { weight: "normal", size: "medium" }, title));
    }
    return title;
};
const renderSubtitle = subtitle => isString(subtitle) ? (React.createElement(Text, { ellipsis: true, size: "small", weight: "thin" }, subtitle)) : (subtitle);
const renderContent = content => isString(content) ? (React.createElement(Text, { className: classes.text, size: "small", weight: "thin" }, content)) : (content);
const renderSelector = ({ type, open, disabled, onChange }) => {
    let selector = null;
    switch (type) {
        case TYPES.CHECKBOX:
            selector = (React.createElement(Checkbox, { checked: open, onChange: onChange, disabled: disabled }));
            break;
        case TYPES.RADIO:
            selector = (React.createElement(Radio, { checked: open, onChange: onChange, disabled: disabled }));
            break;
        case TYPES.TOGGLE:
            selector = (React.createElement(ToggleSwitch, { checked: open, onChange: onChange, size: "small", disabled: disabled }));
            break;
        default:
            break;
    }
    return (React.createElement("span", { className: classes.selectorToggle, onClick: e => e.stopPropagation() }, selector));
};
const SelectableAccordionItem = ({ type = 'toggle', onChange = () => { }, idx, open, disabled, verticalPadding, title, subtitle, content, }) => {
    const { hovered, hoverProps } = useHover();
    const handleChange = useCallback(event => {
        if (disabled) {
            return;
        }
        if (type === 'radio' && open) {
            return;
        }
        onChange(event, idx, !open);
    }, [disabled, type, open, onChange, idx]);
    return (React.createElement("div", { ...hoverProps, "data-hook": dataHooks.item, "data-state": open ? 'open' : 'collapsed', "data-disabled": disabled, className: st(classes.item, {
            hovered: !open && hovered,
            verticalPadding,
            disabled,
        }) },
        React.createElement("div", { onClick: handleChange, className: classes.selector }, renderSelector({ type, open, disabled, onChange: handleChange })),
        React.createElement("div", { "data-hook": dataHooks.itemHeader, onClick: handleChange, className: classes.header },
            renderTitle(title),
            renderSubtitle(subtitle)),
        React.createElement("div", { className: classes.content },
            content ? (React.createElement(Collapse, { open: open },
                React.createElement("div", { className: classes.inner }, renderContent(content)))) : null,
            React.createElement("div", { className: classes.divider },
                React.createElement(Divider, null)))));
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';
export default SelectableAccordionItem;
//# sourceMappingURL=Item.js.map