import React from "react";
import PropTypes from "prop-types";
import { Button } from "../";

type DialogButtonVariants =
  | "danger"
  | "dark"
  | "info"
  | "light"
  | "primary"
  | "secondary"
  | "success"
  | "warning";

export interface IDialogButtonProps {
  ["data-testid"]?: string;
  className?: string;
  disabled?: boolean;
  onClick: () => void;
  text: string;
  type?: "button" | "reset" | "submit" | "cancel";
  variant?: DialogButtonVariants;
}

const DialogButton: React.FC<IDialogButtonProps> = props => {
  const { className, disabled, onClick, text, type, variant } = props;
  const dataTestId = props["data-testid"] || `honey-ui-dialog-button-${type}`;

  return (
    <Button
      className={className}
      data-testid={dataTestId}
      disabled={disabled}
      onClick={onClick}
      variant={variant ? variant : type === "submit" ? "primary" : "light"}
      type={type}
    >
      {text}
    </Button>
  );
};

DialogButton.displayName = "Dialog Button";

DialogButton.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  onClick: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
  type: PropTypes.oneOf(["button", "reset", "submit", "cancel"])
};

export default DialogButton;