"use client";

import cx from "classnames";
import type { RefCallback } from "react";
import React, { useMemo } from "react";
import { useStatic } from "../../utils/hooks";
import { Accordion } from "../Accordion/Accordion";
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;
  md?: string;
  lg?: string;
  xl?: string;
  xxl?: string;
  [key: string]: string | undefined;
}

export type FeatureAccordionImage =
  | FeatureAccordionImageSrc
  | FeatureAccordionImageResponsive;

interface AccordionProps {
  /** Additional CSS classes */
  className?: string;
  /** Additional CSS classes for preview area */
  previewClassName?: string;
}

const getImageData = (props: Record<string, any>) => ({
  id: props.id,
  imageSrc: props.image || props.imageUrl,
  imageAlt: props.imageAlt,
  imageSrcSet: props.imageSrcSet,
});

const FeatureAccordion = (
  props: AccordionProps & { children: React.ReactNode },
) => {
  const { className, previewClassName, 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, ...getImageData(child.props) })),
    [childrenArray],
  );

  return (
    <div
      className={classes}
      data-feature-accordion
      ref={featureAccordionRef as RefCallback<HTMLDivElement>}
      {...other}
    >
      <div className={`${CLASS_ROOT}__accordion`}>
        <Accordion>
          {childrenWithImageData.map(({ child, imageSrc }) => {
            if (!imageSrc) return null;

            return child;
          })}
        </Accordion>
      </div>
      <div className={cx(`${CLASS_ROOT}__preview`, previewClassName)}>
        {childrenWithImageData.map(
          ({ id, imageSrc, imageAlt, imageSrcSet }, index) => {
            if (!imageSrc) return null;

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

export { FeatureAccordion };