import * as Ariakit from '@ariakit/react';
import { getClassNames } from '@websolutespa/bom-core';
import { forwardRef, useContext } from 'react';
import { Button, ButtonProps } from '../button/button';
import { Role } from '../role/role';
import { ModalContext } from './modal.context';

export type ModalConfirmProps = Ariakit.DialogDismissProps & Omit<ButtonProps, keyof Ariakit.DialogDismissProps> & {
  asChild?: boolean;
};

export const ModalConfirm = forwardRef<HTMLButtonElement, ModalConfirmProps>(
  function ModalConfirm({
    children,
    asChild,
    store,
    className,
    ...props
  }, ref) {
    const classNames = getClassNames('modal__confirm', className);
    const context = useContext(ModalContext);
    return (
      <Ariakit.DialogDismiss
        className={classNames}
        ref={ref}
        store={store}
        {...props}
        render={asChild ? (
          <Role />
        ) : (
          <Button
            {...props}
            onClick={context.onConfirm}
          >
            {children}
          </Button>
        )}
      />
    );
  }
);