import "./CardView.css";
import {CardContext as $68e4e6fe083e22fd$export$d0b2ee33ebf7d64, InternalCardViewContext as $68e4e6fe083e22fd$export$cb658fed5fefe1d} from "./Card.mjs";
import {ImageCoordinator as $4b5e069e9e001e8b$export$1b926c015f09611d} from "./ImageCoordinator.mjs";
import {useActionBarContainer as $f21f2186348fbc5b$export$13f32e21845e01d0} from "./ActionBar.mjs";
import {useDOMRef as $80ecb974df713a30$export$c2c55ef9111cafd8} from "./useDOMRef.mjs";
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../../icons/useSpectrumContextProps.mjs";
import {jsx as $aG2ym$jsx, jsxs as $aG2ym$jsxs, Fragment as $aG2ym$Fragment} from "react/jsx-runtime";
import {GridListLoadMoreItem as $aG2ym$GridListLoadMoreItem, GridListItem as $aG2ym$GridListItem, GridList as $aG2ym$GridList} from "react-aria-components/GridList";
import {Collection as $aG2ym$Collection} from "react-aria/Collection";
import {createContext as $aG2ym$createContext, forwardRef as $aG2ym$forwardRef, useRef as $aG2ym$useRef, useState as $aG2ym$useState, useCallback as $aG2ym$useCallback, useMemo as $aG2ym$useMemo} from "react";
import {Size as $aG2ym$Size, WaterfallLayout as $aG2ym$WaterfallLayout, GridLayout as $aG2ym$GridLayout, Virtualizer as $aG2ym$Virtualizer} from "react-aria-components/Virtualizer";
import {useEffectEvent as $aG2ym$useEffectEvent} from "react-aria/private/utils/useEffectEvent";
import {useLayoutEffect as $aG2ym$useLayoutEffect} from "react-aria/private/utils/useLayoutEffect";
import {useResizeObserver as $aG2ym$useResizeObserver} from "react-aria/private/utils/useResizeObserver";

/*
 * Copyright 2024 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */ 












const $bbcff092fe610ff3$var$layoutOptions = {
    XS: {
        compact: {
            minSpace: new (0, $aG2ym$Size)(6, 6),
            minItemSize: new (0, $aG2ym$Size)(100, 100),
            maxItemSize: new (0, $aG2ym$Size)(140, 140)
        },
        regular: {
            minSpace: new (0, $aG2ym$Size)(8, 8),
            minItemSize: new (0, $aG2ym$Size)(100, 100),
            maxItemSize: new (0, $aG2ym$Size)(140, 140)
        },
        spacious: {
            minSpace: new (0, $aG2ym$Size)(12, 12),
            minItemSize: new (0, $aG2ym$Size)(100, 100),
            maxItemSize: new (0, $aG2ym$Size)(140, 140)
        }
    },
    S: {
        compact: {
            minSpace: new (0, $aG2ym$Size)(8, 8),
            minItemSize: new (0, $aG2ym$Size)(150, 150),
            maxItemSize: new (0, $aG2ym$Size)(210, 210)
        },
        regular: {
            minSpace: new (0, $aG2ym$Size)(12, 12),
            minItemSize: new (0, $aG2ym$Size)(150, 150),
            maxItemSize: new (0, $aG2ym$Size)(210, 210)
        },
        spacious: {
            minSpace: new (0, $aG2ym$Size)(16, 16),
            minItemSize: new (0, $aG2ym$Size)(150, 150),
            maxItemSize: new (0, $aG2ym$Size)(210, 210)
        }
    },
    M: {
        compact: {
            minSpace: new (0, $aG2ym$Size)(12, 12),
            minItemSize: new (0, $aG2ym$Size)(200, 200),
            maxItemSize: new (0, $aG2ym$Size)(280, 280)
        },
        regular: {
            minSpace: new (0, $aG2ym$Size)(16, 16),
            minItemSize: new (0, $aG2ym$Size)(200, 200),
            maxItemSize: new (0, $aG2ym$Size)(280, 280)
        },
        spacious: {
            minSpace: new (0, $aG2ym$Size)(20, 20),
            minItemSize: new (0, $aG2ym$Size)(200, 200),
            maxItemSize: new (0, $aG2ym$Size)(280, 280)
        }
    },
    L: {
        compact: {
            minSpace: new (0, $aG2ym$Size)(16, 16),
            minItemSize: new (0, $aG2ym$Size)(270, 270),
            maxItemSize: new (0, $aG2ym$Size)(370, 370)
        },
        regular: {
            minSpace: new (0, $aG2ym$Size)(20, 20),
            minItemSize: new (0, $aG2ym$Size)(270, 270),
            maxItemSize: new (0, $aG2ym$Size)(370, 370)
        },
        spacious: {
            minSpace: new (0, $aG2ym$Size)(24, 24),
            minItemSize: new (0, $aG2ym$Size)(270, 270),
            maxItemSize: new (0, $aG2ym$Size)(370, 370)
        }
    },
    XL: {
        compact: {
            minSpace: new (0, $aG2ym$Size)(20, 20),
            minItemSize: new (0, $aG2ym$Size)(340, 340),
            maxItemSize: new (0, $aG2ym$Size)(460, 460)
        },
        regular: {
            minSpace: new (0, $aG2ym$Size)(24, 24),
            minItemSize: new (0, $aG2ym$Size)(340, 340),
            maxItemSize: new (0, $aG2ym$Size)(460, 460)
        },
        spacious: {
            minSpace: new (0, $aG2ym$Size)(28, 28),
            minItemSize: new (0, $aG2ym$Size)(340, 340),
            maxItemSize: new (0, $aG2ym$Size)(460, 460)
        }
    }
};
const $bbcff092fe610ff3$var$SIZES = [
    'XS',
    'S',
    'M',
    'L',
    'XL'
];
const $bbcff092fe610ff3$var$cardViewStyles = function anonymous(props, overrides) {
    let rules = " ";
    let height = false;
    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
    for (let p of matches){
        if (p[1] === "F") height = true;
        rules += p[0];
    }
    if (props.isLoading) rules += ' Pc12';
    else rules += ' Pa12';
    if (props.isEmpty) rules += ' sd12';
    rules += ' _oa12';
    rules += ' _ta12';
    rules += ' eb12';
    rules += ' _Ca12';
    if (props.isEmpty) {
        if (props.isFocusVisible) rules += ' _Lf12';
    } else rules += ' _Le12';
    rules += ' Oh12';
    rules += ' Olc12';
    rules += ' _Mc12';
    rules += ' _Kb12';
    if (props.isActionBar) {
        if (!height) rules += ' Fb12';
    }
    return rules;
};
const $bbcff092fe610ff3$var$wrapperStyles = function anonymous(props, overrides) {
    let rules = " ";
    let position = false;
    let matches = String(overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L|F|M|K)[^\s]+/g);
    for (let p of matches){
        if (p[1] === "_P") position = true;
        rules += p[0];
    }
    if (!position) rules += ' _Pc12';
    rules += ' _Nb12';
    rules += ' Pb12';
    return rules;
};
const $bbcff092fe610ff3$export$64992ac69f286e5c = /*#__PURE__*/ (0, $aG2ym$createContext)(null);
const $bbcff092fe610ff3$export$7e52c821f7b6f422 = /*#__PURE__*/ (0, $aG2ym$forwardRef)(function CardView(props, ref) {
    [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $bbcff092fe610ff3$export$64992ac69f286e5c);
    let { children: children, layout: layoutName = 'grid', size: sizeProp = 'M', density: density = 'regular', variant: variant = 'primary', selectionStyle: selectionStyle = 'checkbox', UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, styles: styles, loadingState: loadingState, onLoadMore: onLoadMore, items: items, renderEmptyState: renderEmptyStateProp, ...otherProps } = props;
    let domRef = (0, $80ecb974df713a30$export$c2c55ef9111cafd8)(ref);
    let innerRef = (0, $aG2ym$useRef)(null);
    let scrollRef = props.renderActionBar ? innerRef : domRef;
    // This calculates the maximum t-shirt size where at least two columns fit in the available width.
    let [maxSizeIndex, setMaxSizeIndex] = (0, $aG2ym$useState)($bbcff092fe610ff3$var$SIZES.length - 1);
    let updateSize = (0, $aG2ym$useCallback)(()=>{
        let w = scrollRef.current?.clientWidth ?? 0;
        let i = $bbcff092fe610ff3$var$SIZES.length - 1;
        while(i > 0){
            let opts = $bbcff092fe610ff3$var$layoutOptions[$bbcff092fe610ff3$var$SIZES[i]][density];
            if (w >= opts.minItemSize.width * 2 + opts.minSpace.width * 3) break;
            i--;
        }
        setMaxSizeIndex(i);
    }, [
        scrollRef,
        density
    ]);
    let updateSizeEvent = (0, $aG2ym$useEffectEvent)(updateSize);
    (0, $aG2ym$useResizeObserver)({
        ref: scrollRef,
        box: 'border-box',
        onResize: updateSize
    });
    (0, $aG2ym$useLayoutEffect)(()=>{
        updateSizeEvent();
    }, []);
    // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
    let size = $bbcff092fe610ff3$var$SIZES[Math.min(maxSizeIndex, $bbcff092fe610ff3$var$SIZES.indexOf(sizeProp))];
    let layout = layoutName === 'waterfall' ? (0, $aG2ym$WaterfallLayout) : (0, $aG2ym$GridLayout);
    let options = $bbcff092fe610ff3$var$layoutOptions[size][density];
    let ctx = (0, $aG2ym$useMemo)(()=>({
            size: size,
            variant: variant
        }), [
        size,
        variant
    ]);
    let { selectedKeys: selectedKeys, onSelectionChange: onSelectionChange, actionBar: actionBar, actionBarHeight: actionBarHeight } = (0, $f21f2186348fbc5b$export$13f32e21845e01d0)({
        ...props,
        scrollRef: scrollRef
    });
    let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
    let renderer;
    let cardLoadingSentinel = /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$GridListLoadMoreItem), {
        isLoading: isLoading,
        onLoadMore: onLoadMore
    });
    if (typeof children === 'function' && items) renderer = /*#__PURE__*/ (0, $aG2ym$jsxs)((0, $aG2ym$Fragment), {
        children: [
            /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$Collection), {
                items: items,
                dependencies: props.dependencies,
                children: children
            }),
            cardLoadingSentinel
        ]
    });
    else renderer = /*#__PURE__*/ (0, $aG2ym$jsxs)((0, $aG2ym$Fragment), {
        children: [
            children,
            cardLoadingSentinel
        ]
    });
    // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.
    let renderEmptyState = renderEmptyStateProp ? (renderProps)=>{
        let collection = renderProps.state.collection;
        let firstKey = collection.getFirstKey();
        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') return renderEmptyStateProp(renderProps);
    } : undefined;
    let cardViewCtx = (0, $aG2ym$useMemo)(()=>({
            layout: layoutName,
            ElementType: (0, $aG2ym$GridListItem)
        }), [
        layoutName
    ]);
    let cardView = /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$Virtualizer), {
        layout: layout,
        layoutOptions: options,
        children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$cb658fed5fefe1d).Provider, {
            value: cardViewCtx,
            children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $68e4e6fe083e22fd$export$d0b2ee33ebf7d64).Provider, {
                value: ctx,
                children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $4b5e069e9e001e8b$export$1b926c015f09611d), {
                    children: /*#__PURE__*/ (0, $aG2ym$jsx)((0, $aG2ym$GridList), {
                        ref: scrollRef,
                        ...otherProps,
                        renderEmptyState: renderEmptyState,
                        items: items,
                        layout: "grid",
                        selectionBehavior: selectionStyle === 'highlight' ? 'replace' : 'toggle',
                        selectedKeys: selectedKeys,
                        defaultSelectedKeys: undefined,
                        onSelectionChange: onSelectionChange,
                        style: {
                            ...!props.renderActionBar ? UNSAFE_style : {},
                            // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
                            // Also add scroll padding so keyboard navigating preserves the padding.
                            paddingBottom: actionBarHeight > 0 ? actionBarHeight + options.minSpace.height : 0,
                            scrollPadding: options.minSpace.height,
                            scrollPaddingBottom: actionBarHeight + options.minSpace.height
                        },
                        className: (renderProps)=>(!props.renderActionBar ? UNSAFE_className : '') + $bbcff092fe610ff3$var$cardViewStyles({
                                ...renderProps,
                                isLoading: props.loadingState === 'loading',
                                isActionBar: !!props.renderActionBar
                            }, !props.renderActionBar ? styles : undefined),
                        children: renderer
                    })
                })
            })
        })
    });
    // Add extra wrapper if there is an action bar so we can position relative to it.
    // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
    if (props.renderActionBar) return /*#__PURE__*/ (0, $aG2ym$jsxs)("div", {
        ref: domRef,
        className: UNSAFE_className + $bbcff092fe610ff3$var$wrapperStyles(null, styles),
        style: UNSAFE_style,
        children: [
            cardView,
            actionBar
        ]
    });
    return cardView;
});


export {$bbcff092fe610ff3$export$64992ac69f286e5c as CardViewContext, $bbcff092fe610ff3$export$7e52c821f7b6f422 as CardView};
//# sourceMappingURL=CardView.mjs.map
