import React__default, { useState, useEffect } from 'react';
import classnames from 'classnames';
import { AnimatePresence, motion } from 'framer-motion';
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 { u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
import { F as FilterPickerOption } from './FilterPickerOption-es.js';
import { F as FilterPickerLoadMore } from './FilterPickerLoadMore-es.js';

var styles = {"container":"d-JzbXbz3vI-","optionsList":"_9sPZShzetbo-","filterMessage":"_7iUzJFaZYDs-","emptyStateMessage":"I3lJfMgm-Io-","scrollTop":"VNhhUhatkmw-","scrollNone":"w8LsXerWI7I-","scrollBottom":"-Bk1T-RD-tA-","loadingContainer":"czPVeCUK2Zc-","hasOptions":"_9IwiWJBxJxQ-","spinning":"BrOPnXbFiHU-"};

function FilterPickerContentList(props) {
    const { tokens } = useAtlantisTheme();
    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(FilterPickerOption, { 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(AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React__default.createElement(motion.div, { initial: { opacity: 0, y: tokens["space-base"] }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: tokens["space-base"] }, transition: { duration: tokens["timing-base"] / 1000 } },
                    React__default.createElement(Spinner, { size: "small" }))))),
            props.onLoadMore && (React__default.createElement(FilterPickerLoadMore, { 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 { FilterPickerContentList as F };
