import React, { cloneElement, ReactElement } from "react";

import { IconProps } from "../icon/Icon";
import { IconContainer } from "./IconContainer";

export function combineIntoAdornment(
  elements: Array<ReactElement | IconProps["name"] | undefined>,
  disabled: boolean
) {
  const adornments = React.Children.map(elements, (element, index) => {
    if (element === undefined || element === null) {
      return undefined;
    }

    if (typeof element === "string") {
      return <IconContainer icon={element} disabled={disabled} key={index} />;
    }

    return cloneElement(element, {
      disabled,
      key: `${index}-${disabled}`,
      ...element.props,
    });
  })?.filter(Boolean);

  if (adornments?.length === 0) {
    return undefined;
  } else {
    return adornments;
  }
}
