import { BlockSizeUnit, BlockStackDirection } from '@devvit/protos';
import { unsafeHTML as serverUnsafeHTML } from '@reddit/baseplate/html/html.js';
import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
import { classMap as clientClassMap } from 'lit/directives/class-map.js';
import { ref as clientRef } from 'lit/directives/ref.js';
import { unsafeHTML as clientUnsafeHTML } from 'lit/directives/unsafe-html.js';
export function classMap(classInfo, forceString) {
    const { getType } = getTemplateRenderingStrategy();
    if (getType() === 'client' && forceString !== true) {
        return clientClassMap(classInfo);
    }
    const result = Object.keys(classInfo)
        .filter((className) => classInfo[className])
        .join(' ');
    if (getType() === 'client' && forceString === true) {
        // We can't use `serverUnsafeHTML` here because it ends up just calling
        // `clientUnsafeHTML` due to our replacement plugins.
        return clientUnsafeHTML(result).values.join(' ');
    }
    return serverUnsafeHTML(result).string;
}
export function unsafeHTML(input) {
    const { getType } = getTemplateRenderingStrategy();
    if (getType() === 'client') {
        return clientUnsafeHTML(input);
    }
    return serverUnsafeHTML(input);
}
export function ref(ref) {
    const { getType } = getTemplateRenderingStrategy();
    if (getType() === 'client') {
        return clientRef(ref);
    }
    return '';
}
export function isHTMLElement(el) {
    return el?.style !== undefined;
}
export function resolveIcon(name) {
    const { html } = getTemplateRenderingStrategy();
    const fill = name.match(/-fill$/) !== null;
    // clean up icon name
    const iconName = name.replace(/^icon-/, '').replace(/-(fill|outline)$/, '');
    // Some icons are not properly named (powerup-color-outline, powerup-fill-color).
    // As a result we can't apply our normal search into the object keys so fallback to using the name as-is
    // and try to look in both the outline and fill slots in case the faceplace generator did something odd.
    // It seems like it falls back to filling the outline slot, but better safe than sorry.
    const group = faceplateIcons[iconName] ?? faceplateIcons[name];
    const icon = group[fill ? 'fill' : 'outline'] ?? group[fill ? 'outline' : 'fill'];
    if (icon) {
        return html `${unsafeHTML(icon)}`;
    }
    else {
        return html ``;
    }
}
/**
 * Strip semicolons from style values and remove null/undefined values
 * @param styleInfo
 */
export function sanitizeStyleInfo(styleInfo) {
    for (const [key, value] of Object.entries(styleInfo)) {
        if (value == null) {
            delete styleInfo[key];
        }
        else if (typeof value === 'string') {
            styleInfo[key] = value.replace(/;/g, '');
        }
    }
    return styleInfo;
}
/**
 * Returns a BlockSizes object either directly from the block or constructs
 * one from the legacy `size` field
 * @param block
 */
export function getSizes(block) {
    return (block.sizes ??
        (block.size
            ? {
                width: block.size.width !== undefined
                    ? {
                        value: {
                            value: block.size.width,
                            unit: block.size.widthUnit ?? BlockSizeUnit.SIZE_UNIT_PERCENT,
                        },
                    }
                    : undefined,
                height: block.size.height !== undefined
                    ? {
                        value: {
                            value: block.size.height,
                            unit: block.size.heightUnit ?? BlockSizeUnit.SIZE_UNIT_PERCENT,
                        },
                    }
                    : undefined,
                grow: block.size.grow,
            }
            : undefined));
}
export function parseDimension(value, onlyType = undefined) {
    if (!value || (onlyType !== undefined && value.unit !== onlyType)) {
        return undefined;
    }
    return `${value.value}${getSizeUnits(value.unit)}`;
}
export function getSizeUnits(unit) {
    switch (unit) {
        case BlockSizeUnit.SIZE_UNIT_PIXELS:
            return 'px';
        case BlockSizeUnit.SIZE_UNIT_PERCENT:
        case BlockSizeUnit.UNRECOGNIZED:
        case undefined:
        default:
            return '%';
    }
}
/**
 * Extracts the light and dark colors from a BlockColor object with an optional
 * fallback on the original single color parameter.
 * Priority:
 *  - Use the split light/dark colors if available
 *  - If dark color is not available but light is, use light color for both
 *  - If light and dark colors are not available try the legacy color (old apps)
 * @param colors BlockColor object
 * @param legacyColor Original color attribute before it was split into light/dark colors
 */
export function resolveColors(colors, legacyColor) {
    const light = colors?.light ?? legacyColor;
    const dark = colors?.dark ?? light;
    return [light, dark];
}
export function getBlockType(direction) {
    let blockType = '';
    switch (direction) {
        case BlockStackDirection.STACK_DEPTH:
            blockType = 'zstack';
            break;
        case BlockStackDirection.STACK_VERTICAL:
            blockType = 'vstack';
            break;
        case BlockStackDirection.STACK_HORIZONTAL:
            blockType = 'hstack';
            break;
    }
    return blockType;
}
//# sourceMappingURL=util.js.map