import React, { ComponentPropsWithoutRef, useContext } from 'react';
import { Utils } from '../../utils/util';
import { NJButton } from '../button/NJButton';
import { NJAccordionContext } from './NJAccordionContext';

export type NJAccordionActionProps = ComponentPropsWithoutRef<'button'> & {
  /**
   * Action text
   */
  label?: string;
  /**
   * The action when click on the button
   */
  action: 'expand' | 'collapse';
};

export const NJAccordionAction = React.forwardRef<
  HTMLButtonElement & HTMLAnchorElement,
  NJAccordionActionProps
>(({ className, action: actionType, ...props }, forwardedRef) => {
  const { action } = useContext(NJAccordionContext);

  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    action?.(actionType)();
    props.onClick?.(e);
  };

  return (
    <NJButton
      {...props}
      onClick={onClick}
      className={Utils.classNames('nj-accordion__action', className)}
      ref={forwardedRef}
    />
  );
});

NJAccordionAction.displayName = 'NJAccordionAction';