import { isSafeTagName, renderAttrs, renderBlockError } from "./attribute.js";
import type { BlockHandler } from "./handler.type.js";

/**
 * Default handler for `widget:*` block types.
 * Renders `<widget-name attr="value">` custom element tags.
 *
 * The block type carries the widget name (e.g. `widget:counter`),
 * attrs carry the parsed JSON properties.
 */
export function createWidgetHandler(widgetName: string): BlockHandler {
  const tagName = `widget-${widgetName}`;

  return {
    render(_raw: string, attrs?: Record<string, string>): string {
      // The widget name comes from the fence info string, so it is
      // untrusted: `widget:x><script>…` would otherwise be interpolated
      // straight into the tag name and escape the element.
      if (!isSafeTagName(tagName)) {
        return renderBlockError(`Invalid widget name: ${widgetName}`);
      }
      return `<${tagName}${renderAttrs(attrs)}></${tagName}>`;
    },

    serialize(raw: string, attrs?: Record<string, string>): string {
      const content =
        raw ||
        (attrs && Object.keys(attrs).length > 0
          ? JSON.stringify(
              Object.fromEntries(
                Object.entries(attrs).map(([k, v]) => {
                  const num = Number(v);
                  return [k, Number.isNaN(num) ? v : num];
                }),
              ),
              null,
              2,
            )
          : "");
      return `\`\`\`widget:${widgetName}\n${content}\n\`\`\``;
    },
  };
}