import React, {
  ComponentPropsWithoutRef,
  PropsWithChildren,
  ReactElement,
  useContext
} from 'react';
import { Utils } from '../../utils/util';
import { NJIcon } from '../icon/NJIcon';
import { NJAccordionContext } from './NJAccordionContext';

export type NJAccordionItemHeaderProps = PropsWithChildren & ComponentPropsWithoutRef<'div'>;

export const NJAccordionItemHeader = React.forwardRef<HTMLElement, NJAccordionItemHeaderProps>(
  ({ children, ...props }, forwardedRef) => {
    const { hasAlternativeToggleIcon, customIcon } = useContext(NJAccordionContext);
    const newIcon = React.isValidElement(customIcon)
      ? React.cloneElement(customIcon as ReactElement, {
          className: Utils.classNames(
            (customIcon as ReactElement).props.className,
            'nj-accordion-item__icon'
          )
        })
      : null;

    return (
      <summary {...props} ref={forwardedRef}>
        {newIcon}
        <span className="nj-accordion-item__label">{children}</span>
        {hasAlternativeToggleIcon ? (
          <>
            <NJIcon
              name="add"
              className="nj-accordion-item__toggle nj-accordion-item__toggle--closed"
            />
            <NJIcon
              name="remove"
              className="nj-accordion-item__toggle nj-accordion-item__toggle--opened"
            />
          </>
        ) : (
          <NJIcon name="expand_more" className="nj-accordion-item__toggle" />
        )}
      </summary>
    );
  }
);