import { BlockStackDirection } from '@devvit/protos';
import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
import { nothing } from 'lit';
import { alignmentClass, backgroundClass, backgroundStyle, borderClass, borderStyle, defaultClasses, defaultStyles, gapSize, onClickAction, paddingClass, pointerEventsClass, radiusClass, stackDirectionClass, stackGapStyle, } from '../attributes.js';
import { resolveStyleColor } from './color.js';
import { classMap, getBlockType } from './util.js';
export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }, renderBlock, attributeOverrides = undefined) {
    const { html, repeat, styleMap, ifDefined } = getTemplateRenderingStrategy();
    if (block.config?.stackConfig === undefined) {
        console.error('Invalid block: Stack missing StackConfig');
        return nothing;
    }
    const stackConfig = block.config.stackConfig;
    const { children, direction, padding, gap, alignment, reverse, backgroundColor, backgroundColors, border, cornerRadius, } = stackConfig;
    const bgColorLight = backgroundColors?.light ?? backgroundColor;
    const bgColorDark = backgroundColors?.dark ?? bgColorLight;
    const hasBGColor = !!bgColorLight || !!bgColorDark;
    // capture mouse events on a stack if there are actions associated or there's a background color
    const pointerEvents = !!block.actions.length || hasBGColor;
    const classes = {
        ...defaultClasses(block, ctx),
        ...backgroundClass(!!backgroundColors || !!backgroundColor),
        ...stackDirectionClass(direction, reverse),
        ...paddingClass(padding),
        ...alignmentClass(direction, alignment, block),
        ...borderClass(border),
        ...radiusClass(cornerRadius),
        ...pointerEventsClass(pointerEvents),
        ...attributeOverrides?.classes,
    };
    // If this block or parent stack is reverse, gap and positioning offsets are calculated in the opposite direction.
    const blockOrStackReversed = reverse || ctx.stackDirectionReversed;
    const styles = {
        ...defaultStyles(block, ctx, blockOrStackReversed),
        ...backgroundStyle(backgroundColors, backgroundColor),
        ...borderStyle(border),
        ...stackGapStyle(direction, gap, padding, children.length, reverse),
        ...attributeOverrides?.styles,
    };
    const newCtx = {
        ...ctx,
        gapSize: gapSize(gap),
        stackDirection: direction,
        stackDirectionReversed: reverse,
    };
    const onClick = onClickAction(block, ctx);
    const blockType = getBlockType(direction);
    const isReverseZstack = direction === BlockStackDirection.STACK_DEPTH && !!reverse;
    const blockChildren = isReverseZstack ? children.slice().reverse() : children;
    return html `
    <div
      class="${classMap(classes)}"
      style="${styleMap(styles)}"
      @click="${onClick}"
      data-debug-block-type="${blockType}"
      ${resolveStyleColor(styles, 'backgroundColor')}
      ${resolveStyleColor(styles, 'borderColor')}
    >
      ${repeat(blockChildren, (child, childIndex) => {
        return renderBlock(child, {
            ...newCtx,
            childIndex,
        });
    })}
    </div>
  `;
}
//# sourceMappingURL=renderStackBlock.js.map