import { BlockButtonSize, BlockIconSize, BlockStackDirection, BlockType } from '@devvit/protos';
import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
import { button } from '@reddit/faceplate-ui/templates/button.js';
import { styleMap } from '@reddit/faceplate-ui/templateUtils/styleMap.js';
import { nothing } from 'lit';
import { buttonAppearance, buttonSize, defaultClasses, defaultStyles, onClickAction, textColorStyle, } from '../attributes.js';
import { renderIconBlock } from './renderIconBlock.js';
import { classMap } from './util.js';
export function renderButtonBlock(block, ctx) {
    const { html, ifDefined } = getTemplateRenderingStrategy();
    if (block.config?.buttonConfig === undefined) {
        console.error('Invalid block: Button missing ButtonConfig');
        return nothing;
    }
    const { icon, disabled, textColor, textColors } = block.config.buttonConfig;
    const classes = {
        ...defaultClasses(block, ctx),
        textColor: Boolean(textColor || textColors),
    };
    const styles = {
        ...defaultStyles(block, ctx),
        ...textColorStyle(textColors, textColor),
        // not available in all platforms yet
        // ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
    };
    const onClick = onClickAction(block, ctx);
    let iconSize;
    switch (block.config?.buttonConfig?.buttonSize) {
        case BlockButtonSize.BUTTON_SIZE_SMALL:
            iconSize = BlockIconSize.ICON_SIZE_SMALL;
            break;
        case BlockButtonSize.BUTTON_SIZE_LARGE:
            iconSize = BlockIconSize.ICON_SIZE_LARGE;
            break;
        case BlockButtonSize.BUTTON_SIZE_MEDIUM:
        default:
            iconSize = BlockIconSize.ICON_SIZE_MEDIUM;
            break;
    }
    const iconSvg = icon
        ? renderIconBlock({
            type: BlockType.BLOCK_ICON,
            config: { iconConfig: { icon, size: iconSize } },
            actions: [],
        }, { stackDirection: BlockStackDirection.STACK_HORIZONTAL })
        : undefined;
    const iconProp = iconSvg && iconSvg !== nothing ? { leadingIcon: iconSvg } : {};
    // Because of our baseplate replacement plugins, `styleMap` can return either
    // the server-side style we're expecting, or a client-side style object that
    // has a values array instead. We need to handle both cases.
    const styleMapResult = styleMap(styles);
    const styleString = 'string' in styleMapResult
        ? styleMapResult.string
        : styleMapResult.values.join(' ');
    // TODO: correctColor
    return html `${button({
        size: buttonSize(block.config?.buttonConfig?.buttonSize),
        appearance: buttonAppearance(block.config?.buttonConfig?.buttonAppearance),
        ...iconProp,
        children: ifDefined(block.config?.buttonConfig?.text),
        attributes: {
            disabled,
            // convert from StyleInfo to CSSStyleDeclaration
            style: styleString,
            className: classMap(classes, true),
            onclick: onClick ?? null,
            'data-debug-block-type': 'button',
        },
    })}`;
}
//# sourceMappingURL=renderButtonBlock.js.map