import React__default, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { T as Text } from './Text-es.js';
import { G as Glimmer } from './Glimmer-es.js';
import { S as Spinner } from './Spinner-es.js';
import { A as AnimatedPresence } from './AnimatedPresence-es.js';
import { C as ComboboxOption } from './ComboboxOption-es.js';
import { C as ComboboxLoadMore } from './ComboboxLoadMore-es.js';

var styles = {"container":"wFxd-3vJyKo-","optionsList":"PzwV5qiIgV4-","filterMessage":"c6TosVipkmw-","emptyStateMessage":"ZYrg-J4-v2Y-","scrollTop":"FLu6FtihsLo-","scrollNone":"-o-v1zjzb48-","scrollBottom":"_2iW5DZ16G2U-","loadingContainer":"PqwPrWjdB-A-","hasOptions":"v3cabuEY4Xk-","spinning":"NyvSj4UKYJM-"};

function ComboboxContentList(props) {
    const optionsExist = props.options.length > 0;
    const hasSearchTerm = props.searchValue.length > 0;
    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
    return (React__default.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
        optionsExist && (React__default.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
            props.options.map(option => {
                return (React__default.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
            }),
            React__default.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                React__default.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React__default.createElement(Spinner, { size: "small" })))),
            props.onLoadMore && (React__default.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
        props.loading && !optionsExist && (React__default.createElement(React__default.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React__default.createElement("div", { className: styles.loadingContainer, key: index },
            React__default.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
        hasSearchTerm && !props.loading && !optionsExist && (React__default.createElement("div", { className: styles.filterMessage },
            React__default.createElement(Text, { variation: "subdued" },
                "No results for ",
                `“${props.searchValue}”`))),
        !hasSearchTerm && !props.loading && !optionsExist && (React__default.createElement("div", { className: styles.emptyStateMessage },
            React__default.createElement(Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
}
function getZeroIndexStateText(subjectNoun) {
    if (subjectNoun) {
        return `You don't have any ${subjectNoun} yet`;
    }
    return "No options yet";
}
function useScrollState(optionsListRef, options) {
    const [listScrollState, setlistScrollState] = useState("");
    useEffect(() => {
        const handleScroll = () => {
            if (optionsListRef.current) {
                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
                if (scrollHeight === clientHeight) {
                    setlistScrollState("scrollNone");
                }
                else if (scrollTop === 0) {
                    setlistScrollState("scrollTop");
                }
                else if (scrollTop + clientHeight >= scrollHeight) {
                    setlistScrollState("scrollBottom");
                }
                else {
                    setlistScrollState("");
                }
            }
        };
        if (options.length === 0) {
            handleScroll();
        }
        if (optionsListRef.current) {
            optionsListRef.current.addEventListener("scroll", handleScroll);
            handleScroll();
        }
        return () => {
            if (optionsListRef.current) {
                optionsListRef.current.removeEventListener("scroll", handleScroll);
            }
        };
    }, [options]);
    return { listScrollState };
}

export { ComboboxContentList as C };
