/**
 * @file Renderer component for label nodes
 */
import * as React from "react";
import type { NodeRendererProps } from "../../types/NodeDefinition";
import type { LabelNodeData } from "./types";
import styles from "./label.module.css";

/**
 * Node renderer for label nodes
 * Displays title, subtitle, and caption with configurable alignment, wrapping, and text color
 */
export function LabelNodeRenderer({ node, onStartEdit }: NodeRendererProps<LabelNodeData>): React.ReactElement {
  const d = node.data;
  const title = typeof d.labelTitle === "string" ? d.labelTitle : undefined;
  const subtitle = typeof d.labelSubtitle === "string" ? d.labelSubtitle : undefined;
  const caption = typeof d.labelCaption === "string" ? d.labelCaption : undefined;
  const align = d.align === "left" || d.align === "center" || d.align === "right" ? d.align : "center";
  const wrap = d.wrap === "nowrap" || d.wrap === "balance" ? d.wrap : "normal";
  const ellipsis = d.ellipsis === true;
  const alignClass = align === "left" ? styles.alignLeft : align === "right" ? styles.alignRight : styles.alignCenter;
  const textColor = typeof d.textColor === "string" ? d.textColor : undefined;

  return (
    <div className={styles.labelContainer} onDoubleClick={onStartEdit}>
      <div className={[styles.labelInner, alignClass].join(" ")} style={textColor ? { color: textColor } : undefined}>
        {(title || subtitle) && (
          <hgroup className={styles.labelGroup}>
            {title && (
              <h1
                className={[
                  styles.labelTitle,
                  wrap === "nowrap" ? styles.nowrap : wrap === "balance" ? styles.wrapBalance : "",
                  ellipsis ? styles.ellipsis : "",
                ]
                  .filter(Boolean)
                  .join(" ")}
              >
                {title}
              </h1>
            )}
            {subtitle && (
              <small
                className={[
                  styles.labelSubtitle,
                  wrap === "nowrap" ? styles.nowrap : wrap === "balance" ? styles.wrapBalance : "",
                ]
                  .filter(Boolean)
                  .join(" ")}
              >
                {subtitle}
              </small>
            )}
          </hgroup>
        )}
        {caption && (
          <p
            className={[
              styles.labelCaption,
              wrap === "nowrap" ? styles.nowrap : wrap === "balance" ? styles.wrapBalance : "",
            ]
              .filter(Boolean)
              .join(" ")}
          >
            {caption}
          </p>
        )}
      </div>
    </div>
  );
}

LabelNodeRenderer.displayName = "LabelNodeRenderer";