'use strict';

var React = require('react');
var classnames = require('classnames');
var Text = require('./Text-cjs.js');
var Glimmer = require('./Glimmer-cjs.js');
var Spinner = require('./Spinner-cjs.js');
var AnimatedPresence = require('./AnimatedPresence-cjs.js');
var ComboboxOption = require('./ComboboxOption-cjs.js');
var ComboboxLoadMore = require('./ComboboxLoadMore-cjs.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.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
        optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
            props.options.map(option => {
                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix, customRender: option.customRender, onClick: option.onClick }));
            }),
            React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
                React.createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner.Spinner, { size: "small" })))),
            props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
        props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
            React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
        hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
            React.createElement(Text.Text, { variation: "subdued" },
                "No results for ",
                `“${props.searchValue}”`))),
        !hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.emptyStateMessage },
            React.createElement(Text.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] = React.useState("");
    React.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 };
}

exports.ComboboxContentList = ComboboxContentList;
