import React__default, { createRef, useState, useEffect } from 'react';
import { ListItemFlexContainer } from './styles.js';
import { getListItemWrapperByVariant } from './utils.js';
import { ListItemPrefix } from './components/ListItemPrefix/index.js';
import { ListItemContent } from './components/ListItemContent/index.js';
import { ListItemSuffix } from './components/ListItemSuffix/index.js';
import { noop } from '../../utils/index.js';

const ListItem = (props) => {
    const { variant = 'default', state = 'default', primaryText, prefix, suffix, divider = false, dividerStartsFromText = false, disabled, onClick, } = props;
    const ListItemWrapper = getListItemWrapperByVariant(variant);
    const prefixRef = createRef();
    const [prefixWidth, setPrefixWidth] = useState(0);
    useEffect(() => {
        var _a;
        if ((_a = prefixRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) {
            setPrefixWidth(prefixRef.current.clientWidth);
        }
    }, [prefixRef.current, prefix]);
    return (React__default.createElement(ListItemWrapper, { divider: divider, onClick: state === 'default' && !disabled ? onClick : noop, state: state, prefixWidth: prefixWidth, dividerStartsFromText: dividerStartsFromText, disabled: disabled },
        React__default.createElement(ListItemFlexContainer, { variant: variant },
            prefix && (React__default.createElement(ListItemPrefix, { prefix: prefix, variant: variant, ref: prefixRef })),
            props.variant === 'multi-line' ? (React__default.createElement(ListItemContent, { primaryText: primaryText, secondaryText: props.secondaryText, variant: variant, prefix: prefix, suffix: suffix })) : (React__default.createElement(ListItemContent, { primaryText: primaryText, variant: variant, prefix: prefix, suffix: suffix })),
            suffix && React__default.createElement(ListItemSuffix, { suffix: suffix, variant: variant }))));
};

export { ListItem };
