import type { DomCapture } from "./dom-capture";

export const STYLE_ALLOWLIST = new Set([
  "align-content",
  "align-items",
  "align-self",
  "background",
  "background-attachment",
  "background-clip",
  "background-color",
  "background-image",
  "background-origin",
  "background-position",
  "background-position-x",
  "background-position-y",
  "background-repeat",
  "background-size",
  "border",
  "border-bottom",
  "border-bottom-color",
  "border-bottom-left-radius",
  "border-bottom-right-radius",
  "border-bottom-style",
  "border-bottom-width",
  "border-color",
  "border-left",
  "border-left-color",
  "border-left-style",
  "border-left-width",
  "border-radius",
  "border-right",
  "border-right-color",
  "border-right-style",
  "border-right-width",
  "border-style",
  "border-top",
  "border-top-color",
  "border-top-left-radius",
  "border-top-right-radius",
  "border-top-style",
  "border-top-width",
  "border-width",
  "box-shadow",
  "box-sizing",
  "color",
  "column-gap",
  "contain",
  "direction",
  "display",
  "filter",
  "flex",
  "flex-direction",
  "flex-flow",
  "flex-wrap",
  "font",
  "font-family",
  "font-feature-settings",
  "font-kerning",
  "font-size",
  "font-size-adjust",
  "font-stretch",
  "font-style",
  "font-variant",
  "font-variant-caps",
  "font-variant-east-asian",
  "font-variant-ligatures",
  "font-variant-numeric",
  "font-variation-settings",
  "font-weight",
  "gap",
  "grid",
  "grid-auto-columns",
  "grid-auto-flow",
  "grid-auto-rows",
  "grid-template-areas",
  "grid-template-columns",
  "grid-template-rows",
  "height",
  "hyphens",
  "inset",
  "inset-block",
  "inset-inline",
  "isolation",
  "justify-content",
  "left",
  "letter-spacing",
  "line-height",
  "margin",
  "margin-bottom",
  "margin-left",
  "margin-right",
  "margin-top",
  "max-height",
  "max-width",
  "min-height",
  "min-width",
  "opacity",
  "outline",
  "outline-color",
  "outline-offset",
  "outline-style",
  "outline-width",
  "overflow",
  "overflow-wrap",
  "overflow-x",
  "overflow-y",
  "padding",
  "padding-bottom",
  "padding-left",
  "padding-right",
  "padding-top",
  "position",
  "right",
  "row-gap",
  "text-align",
  "text-align-last",
  "text-decoration",
  "text-decoration-color",
  "text-decoration-line",
  "text-decoration-style",
  "text-decoration-thickness",
  "text-indent",
  "text-rendering",
  "text-shadow",
  "text-transform",
  "top",
  "transform",
  "transform-origin",
  "visibility",
  "white-space",
  "width",
  "word-break",
  "word-spacing",
  "writing-mode",
  "z-index"
]);

export const SKIP_STYLE_VALUES = new Set([
  "",
  "initial",
  "unset",
  "revert",
  "revert-layer"
]);

export function extractCss(capture: DomCapture): string {
  const shouldFilter = capture.inlineStyles !== false;
  const lines: string[] = [];
  lines.push(".opendevbrowser-root {");
  for (const [key, value] of Object.entries(capture.styles)) {
    const trimmed = value.trim();
    if (trimmed.length === 0) continue;
    if (shouldFilter) {
      if (!STYLE_ALLOWLIST.has(key)) continue;
      if (SKIP_STYLE_VALUES.has(trimmed)) continue;
    }
    lines.push(`  ${key}: ${value};`);
  }
  lines.push("}");
  return lines.join("\n");
}
