"use client";

import cx from "classnames";
import React, { RefCallback, useMemo } from "react";
import { useStatic } from "../../utils/hooks";
import { Accordion } from "../Accordion/Accordion";
import { Grid } from "../Grid/Grid";
import { GridCol } from "../Grid/GridCol";
import { Image } from "../Image";
import FeatureAccordionStatic from "./FeatureAccordion.static";

const CLASS_ROOT = "feature-accordion";

export interface FeatureAccordionImageSrc {
  src: string;
  srcSet?: string;
}

export interface FeatureAccordionImageResponsive {
  default: string;
  sm?: string;
  lg?: string;
  xl?: string;
  xxl?: string;
  [key: string]: string | undefined;
}

export type FeatureAccordionImage =
  | FeatureAccordionImageSrc
  | FeatureAccordionImageResponsive;

interface AccordionProps {
  /** Additional CSS classes */
  className?: string;
}

const FeatureAccordion = (
  props: AccordionProps & { children: React.ReactNode },
) => {
  const { className, children, ...other } = props;
  const [featureAccordionRef] = useStatic(FeatureAccordionStatic);

  const classes = cx(CLASS_ROOT, className);

  const childrenArray = useMemo(
    () => React.Children.toArray(children) as React.ReactElement<any>[],
    [children],
  );

  // Extract image data once to avoid duplication
  const childrenWithImageData = useMemo(
    () =>
      childrenArray.map((child) => ({
        child,
        id: child.props.id,
        imageSrc:
          child.props["data-image"] ||
          child.props.image ||
          child.props["data-image-url"] ||
          child.props.imageUrl,
        imageAlt: child.props["data-image-alt"] || child.props.imageAlt,
        imageSrcSet:
          child.props["data-image-srcset"] || child.props.imageSrcSet,
        imageUrl: child.props["data-image-url"] || child.props.imageUrl,
      })),
    [childrenArray],
  );

  return (
    <Grid
      className={classes}
      data-feature-accordion
      ref={featureAccordionRef as RefCallback<HTMLDivElement>}
      {...other}
    >
      <GridCol
        size={{
          xs: 12,
          md: 6,
        }}
        className={`${CLASS_ROOT}__accordion`}
      >
        <Accordion>
          {childrenWithImageData.map(
            ({ child, id, imageSrc, imageAlt, imageSrcSet, imageUrl }) => {
              if (!imageSrc) return null;

              return React.cloneElement(child, {
                children: (
                  <>
                    <div className={`${CLASS_ROOT}__content`}>
                      {child.props.children}
                    </div>
                    <div className={cx(`${CLASS_ROOT}__preview`, "hide-md")}>
                      <Image
                        key={id}
                        data-feature-accordion-image
                        src={imageSrc}
                        alt={imageAlt}
                        srcSet={imageSrcSet}
                        className={`${CLASS_ROOT}__image--mobile`}
                      />
                    </div>
                  </>
                ),
              });
            },
          )}
        </Accordion>
      </GridCol>
      <GridCol
        size={{
          xs: 12,
          md: 6,
        }}
        className={cx(`${CLASS_ROOT}__preview`, "show-md")}
      >
        {childrenWithImageData.map(
          ({ id, imageSrc, imageAlt, imageSrcSet, imageUrl }, index) => {
            if (!imageSrc) return null;

            return (
              <Image
                key={id}
                data-feature-accordion-image
                src={imageSrc}
                alt={imageAlt}
                srcSet={imageSrcSet}
                className={cx({ hide: index !== 0 })}
              />
            );
          },
        )}
      </GridCol>
    </Grid>
  );
};

export { FeatureAccordion };
