import type { CSSProperties } from "react"
import type { DocParagraphStyleDefinition, DocParagraphStylesCatalog } from "@/lib/drive/docs-paragraph-styles"

export function paragraphStylePreviewStyle(def: DocParagraphStyleDefinition): CSSProperties {
  return {
    fontFamily: def.fontFamily,
    fontSize: def.fontSizePx ? `${def.fontSizePx}px` : undefined,
    fontWeight: def.bold ? 700 : 400,
    fontStyle: def.italic ? "italic" : "normal",
    textDecoration: def.underline ? "underline" : undefined,
    color: def.color,
    lineHeight: def.lineHeight,
  }
}

export function buildParagraphStylesCss(
  catalog: DocParagraphStylesCatalog,
  editorSelector = ".ultidrive-richtext-editor"
): string {
  const rules: string[] = []

  for (const def of Object.values(catalog.definitions)) {
    const selector = `${editorSelector} [data-style-id="${def.id}"]`
    const props: string[] = []
    if (def.fontFamily) props.push(`font-family: ${def.fontFamily}`)
    if (def.fontSizePx) props.push(`font-size: ${def.fontSizePx}px`)
    if (def.bold) props.push("font-weight: 700")
    if (def.italic) props.push("font-style: italic")
    if (def.underline) props.push("text-decoration: underline")
    if (def.color) props.push(`color: ${def.color}`)
    if (def.lineHeight) props.push(`line-height: ${def.lineHeight}`)
    if (def.spaceBeforePt) props.push(`margin-top: ${def.spaceBeforePt}pt`)
    if (def.spaceAfterPt) props.push(`margin-bottom: ${def.spaceAfterPt}pt`)
    if (def.textAlign) props.push(`text-align: ${def.textAlign}`)
    if (props.length > 0) rules.push(`${selector} { ${props.join("; ")}; }`)
  }

  return rules.join("\n")
}