'use strict';

var React = require('react');
var classnames = require('classnames');
var framerMotion = require('framer-motion');
var Text = require('./Text-cjs.js');
var Glimmer = require('./Glimmer-cjs.js');
var Spinner = require('./Spinner-cjs.js');
var AtlantisThemeContext = require('./AtlantisThemeContext-cjs.js');
var FilterPickerOption = require('./FilterPickerOption-cjs.js');
var FilterPickerLoadMore = require('./FilterPickerLoadMore-cjs.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 } = AtlantisThemeContext.useAtlantisTheme();
    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(FilterPickerOption.FilterPickerOption, { 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(framerMotion.AnimatePresence, { initial: false }, Boolean(props.loading && optionsExist) && (React.createElement(framerMotion.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.createElement(Spinner.Spinner, { size: "small" }))))),
            props.onLoadMore && (React.createElement(FilterPickerLoadMore.FilterPickerLoadMore, { 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.FilterPickerContentList = FilterPickerContentList;
