import React, { forwardRef, useRef } from "react";
import { fnWithProps } from "../../../types/fnWithProps.js";
import { useRipple } from "../../../utils/useRipple.js";
import { ICON } from "../../icons/Icon.js";
import { StyledIcon, StyledInnerContainer, StyledItem, StyledNoIcon } from "./Item.styled.js";
import { Label } from "./Label.js";
import { Value } from "./Value.js";
const icon = React.createElement(StyledIcon, { name: ICON.forward });
const noIcon = React.createElement(StyledNoIcon, null);
const ListItemInnerContainerClassNameSelector = StyledInnerContainer.toString();
const ItemBase = forwardRef(({ href, to, onClick, Link, ratio, ...props }, ref) => {
    var _a, _b;
    const innerRef = useRef(null);
    const ripple = useRipple({ ref: innerRef });
    const r = ratio ? ratio.split("/") : [];
    const pre = typeof props.selected === "boolean"
        ? React.createElement(Label, null, props.selected ? icon : noIcon)
        : null;
    const ren = !r.length
        ? props.children
        : (_a = React.Children.map(props.children, (child, index) => {
            var _a;
            if (!child || typeof child !== "object" || !("type" in child)) {
                return child;
            }
            const flex = (_a = r[index]) !== null && _a !== void 0 ? _a : undefined;
            if (flex === undefined) {
                return child;
            }
            return React.cloneElement(child, {
                style: { flex },
                css: { flex },
            });
        })) !== null && _a !== void 0 ? _a : [];
    const interactive = Boolean((_b = onClick !== null && onClick !== void 0 ? onClick : href) !== null && _b !== void 0 ? _b : to);
    const rippleProps = interactive
        ? { onPointerDown: ripple.onPointerDown, onKeyDown: ripple.onKeyDown }
        : {};
    if (to) {
        if (!Link) {
            throw new TypeError("`to` prop given without `Link` component");
        }
        return (React.createElement(StyledItem, { ...props, ref: ref },
            React.createElement(Link, { href: to },
                React.createElement(StyledInnerContainer, { as: "a", href: to, ref: innerRef, ...rippleProps },
                    pre,
                    ren,
                    ripple.ripples))));
    }
    if (href) {
        return (React.createElement(StyledItem, { ...props, ref: ref },
            React.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick, ref: innerRef, ...rippleProps },
                pre,
                ren,
                ripple.ripples)));
    }
    if (onClick) {
        return (React.createElement(StyledItem, { ...props, ref: ref },
            React.createElement(StyledInnerContainer, { as: "button", onClick: onClick, ref: innerRef, ...rippleProps },
                pre,
                ren,
                ripple.ripples)));
    }
    return React.createElement(StyledItem, { ...props, ref: ref },
        React.createElement(StyledInnerContainer, null,
            pre,
            ren));
});
ItemBase.displayName = "List.Item";
const Item = fnWithProps(ItemBase, {
    Label,
    Value,
});
Item.toString = () => StyledItem.toString();
export { Item, ListItemInnerContainerClassNameSelector };
//# sourceMappingURL=Item.js.map