import { ComponentPropsWithoutRef, forwardRef } from "react";
import { useButtonSlot } from "./useButtonSlots";

export type ButtonRootOwnProps = {
  iconOnly?: boolean;
  hideIcon?: boolean;
};

export type ButtonRootStateProps = {
  loading?: boolean;
  disabled?: boolean;
};

export type ButtonRootPrimitiveProps = Omit<
  ComponentPropsWithoutRef<"button">,
  keyof ButtonRootStateProps
>;

export type ButtonRootProps = ButtonRootOwnProps &
  ButtonRootStateProps &
  ButtonRootPrimitiveProps;

export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
  (props, ref) => {
    const { children, loading, iconOnly, hideIcon, ...rest } = props;
    const { iconNode, loadingNode } = useButtonSlot(children);

    return (
      <button ref={ref} {...rest}>
        {loadingNode ?? loadingNode}
        {!loadingNode && iconNode ? (hideIcon ? null : iconNode) : null}
        {children}
      </button>
    );
  },
);
ButtonRoot.displayName = "ButtonRoot";
// 我需要一个通用hook方法 useProps<ownProps,stateProps,primitiveProps>(props)，返一个对象 { ownProps，stateProps,primitiveProps}