import React, { useId } from "react";
import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";
import { Columns, ColumnsCol } from "@arc-ui/components/Columns";
import { Rule } from "@arc-ui/components/Rule";
import { Text } from "@arc-ui/components/Text";
import { Align } from "@arc-ui/components/Align";
import { Heading } from "@arc-ui/components/Heading";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { Hidden } from "@arc-ui/components/Hidden";
import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
import styles from "./Statistics.module.css";
import { getLinkProps } from "./helpers/get-link-props";
import { type Statistic } from "./types/statistic";

export const Statistics: React.FC<StatisticsProps> = ({
  id,
  isHeadingWordWrap,
  headingLevel,
  heading,
  content,
  statistics,
  ...props
}) => {
  const componentId = useId();

  return (
    <Columns isGutterless {...filterAttrs(props)}>
      <ColumnsCol spanM={9}>
        <SectionHeading
          id={id}
          heading={heading}
          isHeadingWordWrap={isHeadingWordWrap}
          headingLevel={headingLevel}
          content={content}
        />
      </ColumnsCol>
      <ColumnsCol spanL={9}>
        <ul className={styles.list}>
          {statistics.map(({ stat, copy, link, source, sourceUrl }, i) => (
            <li key={`statistic-${componentId}-${i}`}>
              {i !== 0 && (
                <>
                  <VerticalSpace size="24" sizeS="32" sizeXL="40" />
                  <Rule />
                  <VerticalSpace size="24" sizeS="32" sizeXL="40" />
                </>
              )}
              <Columns>
                <ColumnsCol spanS={6} spanM={8}>
                  <Align vertical="center">
                    <div className={styles.statWrapper}>
                      <Heading color="brand" size="xxl">
                        {stat}
                      </Heading>
                      <Hidden s m l xl xxl>
                        <VerticalSpace size="12" />
                      </Hidden>
                    </div>
                  </Align>
                </ColumnsCol>
                <ColumnsCol spanS={6} spanM={4}>
                  <Align vertical="center">
                    <Text>{copy}</Text>
                    {link && (
                      <>
                        <VerticalSpace size="12" />
                        <a
                          href={link.href}
                          aria-label={link.ariaLabel}
                          {...getLinkProps(link)}
                        >
                          {link.text}
                        </a>
                      </>
                    )}
                    {source && (
                      <>
                        <VerticalSpace size="12" />
                        <Text size="xs">
                          <span className={styles.mutedText}>{source}</span>
                        </Text>
                      </>
                    )}
                    {sourceUrl && (
                      <Text size="xs">
                        <a className={styles.mutedText} href={sourceUrl}>
                          {sourceUrl}
                        </a>
                      </Text>
                    )}
                  </Align>
                </ColumnsCol>
              </Columns>
            </li>
          ))}
        </ul>
      </ColumnsCol>
    </Columns>
  );
};

export interface StatisticsProps extends Omit<SectionHeadingProps, "isPadded"> {
  statistics: Statistic[];
}