/* @oracle/oraclejet-preact: undefined */
import { jsx, jsxs } from 'preact/jsx-runtime';
import { G as Grid } from './Grid-421eb560.js';
import { c as classNames } from './classNames-4e12b00d.js';
import { styles } from './UNSAFE_ListItemLayout/themes/ListItemLayoutStyles.css.js';

// TODO: revisit idea of negative margin when selector has a proper API for handling spacing
// Jira: JET-54543
/**
 * A ListItemLayout component represents a layout used for list view item elements.
 */
function ListItemLayout({ children, selector, leading, primary, secondary, tertiary, overline, metadata, trailing, action, quaternary, navigation, verticalAlignment = 'middle' }) {
    // generate grid skeleton, adding cells based on which props are defined
    const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } = verticalAlignment === 'top'
        ? getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation)
        : getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation);
    // extra row placed before the other rows, only used with top alignment
    const topRow = overline && verticalAlignment === 'top'
        ? [
            firstCell && jsx("span", { children: " " }),
            secondCell && jsx("span", { children: " " }),
            jsx("div", { className: styles.topRowStyles, children: overline }),
            lastCell && jsx("span", { children: " " })
        ]
        : null;
    // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props
    const textArea = children ? (jsx("div", { className: styles.childrenStyles, children: children })) : (jsxs("div", { className: styles.flexColumnStyles, children: [verticalAlignment === 'top' ? null : jsx("div", { children: overline }), jsx("div", { children: primary }), jsx("div", { children: secondary }), jsx("div", { children: tertiary })] }));
    // a second row is needed when quaternary or navigation are defined
    const secondRow = hasSecondRow
        ? [
            firstCell && jsx("span", { children: " " }),
            secondCell && jsx("span", { children: " " }),
            jsx("div", { className: classNames([
                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
                    styles.rowAlignStyles
                ]), children: quaternary }),
            lastCell && (jsx("div", { className: classNames([
                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
                    styles.endJustifyStyles
                ]), children: navigation }))
        ]
        : null;
    return (jsxs(Grid, { gap: verticalAlignment === 'top' ? '0x' : '4x', gridTemplateColumns: columnsTemplate, children: [topRow, firstCell, secondCell, jsx("div", { className: styles.centerVerticalStyles, children: textArea }), lastCell, secondRow] }));
}
function getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
    const columnsTemplateBuilder = [];
    let firstCell = null;
    if (selector) {
        columnsTemplateBuilder.push('auto');
        firstCell = jsx("div", { className: styles.selectorStyles, children: selector });
    }
    let secondCell = null;
    if (leading) {
        columnsTemplateBuilder.push('auto');
        secondCell = (jsx("div", { className: classNames([styles.centerVerticalStyles, styles.displayFlexStyle]), children: leading }));
    }
    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
    let lastCell = null;
    if (metadata || trailing || action || navigation) {
        columnsTemplateBuilder.push('auto');
        lastCell = (jsxs("div", { className: styles.flexRowStyles, children: [jsx("div", { className: classNames([
                        styles.centerVerticalStyles,
                        metadata ? styles.leftPaddingStyles : ''
                    ]), children: metadata }), jsx("div", { className: classNames([
                        styles.centerVerticalStyles,
                        trailing ? styles.leftPaddingStyles : ''
                    ]), children: trailing }), jsx("div", { className: classNames([styles.centerVerticalStyles, action ? styles.actionStyles : '']), children: action })] }));
    }
    const columnsTemplate = columnsTemplateBuilder.join(' ');
    const hasSecondRow = quaternary || navigation ? true : false;
    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
}
function getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
    const columnsTemplateBuilder = [];
    let firstCell = null;
    if (selector) {
        columnsTemplateBuilder.push('auto');
        firstCell = jsx("div", { className: styles.optInSelectorStyles, children: selector });
    }
    let secondCell = null;
    if (selector || leading) {
        columnsTemplateBuilder.push('auto');
        secondCell = (jsx("div", { className: classNames([
                selector ? styles.leftPaddingStyles : '',
                styles.topAlignStyles,
                leading ? styles.optInRightPaddingStyles : ''
            ]), children: leading }));
    }
    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
    let lastCell = null;
    if (metadata || trailing || action || navigation) {
        columnsTemplateBuilder.push('auto');
        lastCell = (jsx("div", { className: classNames([styles.topAlignStyles]), children: jsxs("div", { className: classNames([styles.optInExtraStyles, styles.flexRowStyles]), children: [jsx("div", { className: classNames([
                            styles.centerVerticalStyles,
                            metadata ? styles.leftPaddingStyles : ''
                        ]), children: metadata }), jsx("div", { className: classNames([
                            styles.centerVerticalStyles,
                            trailing ? styles.leftPaddingStyles : ''
                        ]), children: trailing }), jsx("div", { className: classNames([
                            styles.centerVerticalStyles,
                            action ? styles.actionStyles : ''
                        ]), children: action })] }) }));
    }
    const columnsTemplate = columnsTemplateBuilder.join(' ');
    const hasSecondRow = quaternary || navigation ? true : false;
    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
}

export { ListItemLayout as L };
//# sourceMappingURL=ListItemLayout-e9854821.js.map
