import React, { useId } from "react";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import {
  Heading,
  type HeadingProps,
  type HeadingLevel,
} from "@arc-ui/components/Heading";
import { Text } from "@arc-ui/components/Text";
import { Rule } from "@arc-ui/components/Rule";
import {
  VerticalSpace,
  type VerticalSpaceProps,
} from "@arc-ui/components/VerticalSpace";
import { Columns, ColumnsCol } from "@arc-ui/components/Columns";

import {
  PartnerLogoSubgroup,
  type PartnerLogosSubgroup,
} from "./components/PartnerLogoSubgroup";
import styles from "./PartnerBrandLogos.module.css";

export type {
  LogoTileItem,
  PartnerLogosSubgroup,
} from "./components/PartnerLogoSubgroup";

const getSubheadingLevel = (
  parentLevel: HeadingLevel,
  subLevel?: HeadingLevel,
): HeadingLevel =>
  subLevel ?? (String(Math.min(Number(parentLevel) + 1, 6)) as HeadingLevel);

export const PartnerBrandLogos: React.FC<PartnerBrandLogosProps> = ({
  heading,
  headingProps,
  headingLevel = "2",
  content,
  id,
  rulerTopPadding = { size: "32" },
  rulerBottomPadding = { size: "32" },
  subgroups,
  ...props
}) => {
  const componentId = useId();
  const {
    size: headingSize = "l",
    isResponsive: headingIsResponsive = true,
    ...restHeadingProps
  } = headingProps ?? {};

  return (
    <div {...filterAttrs(props)}>
      <Columns isGutterless>
        <ColumnsCol spanL={9} spanXL={8}>
          <Heading
            level={headingLevel}
            id={id}
            size={headingSize}
            isResponsive={headingIsResponsive}
            {...restHeadingProps}
          >
            {heading}
          </Heading>
          {content && (
            <>
              <VerticalSpace size="16" />
              {content
                .split(/\\n|\n/)
                .filter((p) => p.trim())
                .map((paragraph, i) => (
                  <React.Fragment key={`content-${componentId}-${i}`}>
                    {i > 0 && <VerticalSpace size="8" />}
                    <Text size="m" elementType="p">
                      {paragraph}
                    </Text>
                  </React.Fragment>
                ))}
            </>
          )}
        </ColumnsCol>
      </Columns>

      <VerticalSpace {...rulerTopPadding} />
      <Rule />
      <VerticalSpace {...rulerBottomPadding} />

      <ul className={styles.subgroupList}>
        {subgroups.map((subgroup, i) => (
          <li key={`subgroup-${componentId}-${i}`}>
            <PartnerLogoSubgroup
              subheading={subgroup.subheading}
              text={subgroup.text}
              headingLevel={getSubheadingLevel(
                headingLevel,
                subgroup.subheadingLevel,
              )}
              logos={subgroup.logos}
              tileHeight={subgroup.tileHeight}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

/**
 * Props for the `PartnerBrandLogos` page section component. Renders a heading,
 * optional content, a padded ruler, and a list of partner logo subgroups.
 */
export interface PartnerBrandLogosProps {
  /** Main section heading text. */
  heading: string;
  /**
   * Additional Arc Heading properties (e.g. `size`, `fontStyle`, `color`,
   * `isWordWrap`, `casing`, `isResponsive`). Defaults to size "l", responsive.
   */
  headingProps?: Omit<HeadingProps, "children" | "level">;
  /**
   * Semantic heading level for the main heading. Subgroup headings are
   * automatically derived relative to this value.
   * @default "2"
   */
  headingLevel?: HeadingLevel;
  /** Supporting content text below the heading. Supports paragraph breaks via `\n`. */
  content?: string;
  /** HTML `id` attribute applied to the main heading element. */
  id?: string;
  /**
   * Vertical padding above the ruler. Accepts all VerticalSpace props.
   * @default { size: "32" }
   */
  rulerTopPadding?: VerticalSpaceProps;
  /**
   * Vertical padding below the ruler. Accepts all VerticalSpace props.
   * @default { size: "32" }
   */
  rulerBottomPadding?: VerticalSpaceProps;
  /** Array of partner logo subgroups. */
  subgroups: PartnerLogosSubgroup[];
}