ldc-ovoteam/resources/ts/back/Components/PageConfigs/ConfigDetails.tsx

import { usePage } from "@inertiajs/react";
import { type ReactNode } from "react";

import type { ConfigField, DynamicFieldType } from "@/back/types/dynamic-pages";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface ConfigDetailsProps {
  config: ConfigField[];
}

export default function ConfigDetails({
  config,
}: Readonly<ConfigDetailsProps>) {
  const enumDynamicFieldTypes = usePage().props
    .enumDynamicFieldTypes as DynamicFieldType;
  const getEnumDynamicFieldType = (value: number) => {
    return Object.values(enumDynamicFieldTypes).find(
      (def) => def.value === value,
    );
  };

  const transType = str(trans("uwil-dynamic-pages::trans.attributes.type"))
    .ucFirst()
    .value();
  const transLabel = str(trans("uwil-dynamic-pages::trans.attributes.label"))
    .ucFirst()
    .value();
  const transValidation = str(
    trans("uwil-dynamic-pages::trans.attributes.validation"),
  )
    .ucFirst()
    .value();

  const RenderRows = (fields: ConfigField[], hasBorders = false): ReactNode =>
    fields.map((field, index) => {
      const hasChildren = !!field.children?.length;
      const accordionKey = `${field.key}-${String(index)}`;

      const rowContent = (targetHasChildren = false) => (
        <div className="grid grid-cols-[1fr_1fr_1fr_auto] items-center w-full gap-4">
          <p className="break-words">
            {getEnumDynamicFieldType(field.type)?.label}
          </p>
          <p className="break-words whitespace-normal">
            {field.label}
            <code className="text-xs ms-1 text-muted-foreground break-words break-all whitespace-normal">{`(${field.key})`}</code>
          </p>
          <div className="text-sm text-muted-foreground break-words">
            {field.validation || "—"}
          </div>
          {!targetHasChildren && <div className="w-[16px]" />}
        </div>
      );

      return (
        <AccordionItem
          key={accordionKey}
          value={accordionKey}
          className="border-none"
        >
          {hasChildren ? (
            <AccordionTrigger
              className={cn(
                "gap-0 px-4",
                { "rounded-none border-b mb-2": hasBorders },
                { "py-2": !hasBorders },
              )}
            >
              {rowContent(hasChildren)}
            </AccordionTrigger>
          ) : (
            <div className="px-4 py-2">{rowContent()}</div>
          )}

          {hasChildren && (
            <AccordionContent>
              <div className="border rounded-md space-y-1">
                {RenderRows(field.children ?? [], false)}
              </div>
            </AccordionContent>
          )}
        </AccordionItem>
      );
    });

  return (
    <Accordion type="multiple" className="w-full divide-y">
      {/* HEADER */}
      <div className="grid grid-cols-[1fr_1fr_1fr_auto] text-sm font-medium border-b gap-4 px-4 py-2">
        <div>{transType}</div>
        <div>{transLabel}</div>
        <div>{transValidation}</div>
        <div className="w-[16px]" />
      </div>

      {/* ROWS */}
      {RenderRows(config, true)}
    </Accordion>
  );
}