import cx from "classnames";
import React from "react";
import { Icon } from "../Icon";

interface IControlsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  elemRef?: React.Ref<any>;
  icon: string;
  className?: string;
  isDisabled?: boolean;
}

const CLASS_ROOT = "controls";

type NativeButtonProps = IControlsProps &
  Omit<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    keyof IControlsProps | "href" | "ref"
  > & {
    href?: undefined;
  };

export type ControlsProps = NativeButtonProps;

const Controls = React.forwardRef<any, ControlsProps>((props, ref) => {
  const { elemRef, className, icon, isDisabled, ...rest } = props;
  const classes = cx(CLASS_ROOT, className);

  const buttonProps = rest as React.ButtonHTMLAttributes<HTMLButtonElement>;
  return (
    <button
      type="button"
      className={classes}
      disabled={isDisabled ? true : undefined}
      aria-disabled={isDisabled ? "true" : undefined}
      ref={elemRef || ref}
      {...buttonProps}
    >
      <Icon name={icon} />
    </button>
  );
});

Controls.displayName = "Controls";

export { Controls };