import React from "react";
import classNames from "classnames";

import { filterAttrs } from "@arc-ui/community-utils/filter-attrs";

import { Accordion, type AccordionProps } from "../Accordion";
import { SectionHeading, type SectionHeadingProps } from "../SectionHeading";
import { Link } from "@arc-ui/components/Link";
import { Heading } from "@arc-ui/components/Heading";
import { VerticalSpace } from "@arc-ui/components/VerticalSpace";
import { Tabs, TabsList, TabsContent, TabsItem } from "@arc-ui/components/Tabs";

import styles from "./FAQs.module.css";

const scrollToSectionFocusFirstElement = (item: ExtendedAccordionProps) => {
  if (!item.id) return;

  document.getElementById(item.id)?.scrollIntoView({ behavior: "smooth" });

  // preventScroll avoids interfering with the scroll animation.
  document
    .getElementById(item.disclosureList?.[0]?.id)
    ?.querySelector("summary")
    ?.focus({ preventScroll: true });
};

export const FAQs: React.FC<FAQsProps> = ({
  heading,
  isHeadingWordWrap,
  content,
  id,
  isPadded = false,
  headingLevel = "2",
  image,
  type,
  linkListHeading = "Skip to section",
  accordionData,
  ...props
}) => (
  <div className={styles.FAQs} {...filterAttrs(props)}>
    <SectionHeading
      id={id}
      isHeadingWordWrap={isHeadingWordWrap}
      heading={heading}
      content={content}
      image={image}
      headingLevel={headingLevel}
      isPadded={isPadded}
    />
    {type === "listWithLinks" && (
      <div className={styles.linkListSection}>
        <div className={styles.linkListTitle}>
          <Heading size="xs">{linkListHeading}</Heading>
        </div>
        <ul
          className={classNames({
            [styles.linkList]: true,
            [styles["linkList--padded"]]: isPadded,
          })}
        >
          {accordionData.map((item: ExtendedAccordionProps) => (
            <li className={styles.linkListItem} key={item.heading}>
              <Link
                title={item.heading}
                href={`#${item.id}`}
                onClick={(e) => {
                  e.preventDefault();
                  scrollToSectionFocusFirstElement(item);
                }}
              >
                {item.altLinkTitle ?? item.heading}
              </Link>
            </li>
          ))}
        </ul>
      </div>
    )}
    {type !== "tabs" && accordionData && (
      <ul className={styles.accordionList}>
        {accordionData.map((item: ExtendedAccordionProps) => (
          <li className={styles.accordionListItem} key={item.id}>
            <Accordion
              id={item.id}
              heading={item.heading}
              headingLevel={item.headingLevel}
              content={item.content}
              disclosureList={item.disclosureList}
              headingSize="m"
            />
            <VerticalSpace size="48" sizeL="64" />
          </li>
        ))}
      </ul>
    )}
    {type === "tabs" && (
      <Tabs defaultValue={accordionData[0].heading}>
        <TabsList type="standard">
          {accordionData.map((item: AccordionProps, index: number) => (
            <div key={index}>
              <TabsItem label={item.heading} value={item.heading} />
            </div>
          ))}
        </TabsList>
        <VerticalSpace size="40" />
        {accordionData.map((item: ExtendedAccordionProps, index: number) => (
          <div key={item.heading}>
            <TabsContent value={item.heading}>
              <Accordion
                key={index}
                heading={item.heading}
                headingLevel={item.headingLevel}
                content={item.content}
                disclosureList={item.disclosureList}
                headingSize="m"
              />
            </TabsContent>
          </div>
        ))}
      </Tabs>
    )}
  </div>
);

interface ExtendedAccordionProps extends AccordionProps {
  altLinkTitle?: string;
}
export interface FAQsProps extends SectionHeadingProps {
  type: "list" | "listWithLinks" | "tabs";
  linkListHeading?: string;
  accordionData: ExtendedAccordionProps[];
}