---
import BlockRenderer from "./BlockRenderer.svelte";
import SearchableTextBlock from "./blocks/SearchableTextBlock.svelte";
import type { RowContentLayout } from "../lib/block-types";

interface Props {
  layout: RowContentLayout;
  class?: string;
}

const { layout, class: className = "" } = Astro.props;

function justifyToClass(j?: string): string {
  switch (j) {
    case "end":
      return "justify-end";
    case "center":
      return "justify-center";
    case "between":
      return "justify-between";
    case "around":
      return "justify-around";
    case "evenly":
      return "justify-evenly";
    default:
      return "justify-start";
  }
}

function alignToClass(a?: string): string {
  switch (a) {
    case "end":
      return "items-end";
    case "center":
      return "items-center";
    case "baseline":
      return "items-baseline";
    case "stretch":
      return "items-stretch";
    default:
      return "items-start";
  }
}

const rows = [
  {
    content: layout.row1Content ?? [],
    justify: justifyToClass(layout.row1JustifyContent),
    align: alignToClass(layout.row1AlignItems),
  },
  {
    content: layout.row2Content ?? [],
    justify: justifyToClass(layout.row2JustifyContent),
    align: alignToClass(layout.row2AlignItems),
  },
  {
    content: layout.row3Content ?? [],
    justify: justifyToClass(layout.row3JustifyContent),
    align: alignToClass(layout.row3AlignItems),
  },
];

function isResolvedBlock(item: unknown): item is Record<string, unknown> {
  return typeof item === "object" && item !== null;
}

function blockType(item: Record<string, unknown>): string {
  return (item._type as string) ?? "unknown";
}

function layoutBreakout(item: unknown): boolean {
  if (typeof item !== "object" || item === null) return false;
  const layout = (item as Record<string, unknown>).layout as
    | { breakout?: boolean }
    | undefined;
  return layout?.breakout === true;
}
---

<div class={`content my-6 ${className}`}>
  {
    rows.map((row) =>
      Array.isArray(row.content) && row.content.length > 0 ? (
        <div
          class={`content-row grid grid-cols-12 gap-4 ${row.justify} ${row.align}`}
          role="region"
          data-cf-type="grid-row"
        >
          {row.content.map((item) => {
            const content = isResolvedBlock(item) ? (
              blockType(item) === "searchable_text" ? (
                <SearchableTextBlock client:load block={item} />
              ) : blockType(item) === "iframe" ||
                blockType(item) === "image_gallery" ? (
                <BlockRenderer client:load block={item} />
              ) : (
                <BlockRenderer block={item} />
              )
            ) : null;
            const wrapped =
              content && layoutBreakout(item) ? (
                <div class="col-span-12">
                  <div class="w-screen relative left-1/2 -translate-x-1/2 max-w-none">
                    {content}
                  </div>
                </div>
              ) : (
                content
              );
            return wrapped;
          })}
        </div>
      ) : null,
    )
  }
</div>
