import React from "react";
import { Button, Typography, Tooltip } from "@mui/material";
import { withStyles } from "@mui/styles";
import { styles } from "./styles";

const ActionButtonRaw = (props) => {
  const {
    onClick,
    text,
    selectedTabButton,
    selectedTabButtonStyles,
    disabled,
    buttonStyle,
    iconStyle,
    classes,
    icon,
    submitType,
    shouldRenderTooltip,
    tooltipText,
    variant,
  } = props;

  const getClassName = (type) => {
    switch (type) {
      case "primary":
        return classes.primaryButton;
      case "secondary":
        return classes.secondaryButton;
      case "white":
        if (disabled) {
          return classes.whiteButtonDisabled;
        }
        return classes.whiteButton;
      case "tab":
        if (selectedTabButton) {
          return `${classes.selectedTabButton} ${selectedTabButtonStyles}`;
        }
        return classes.tabButton;
      default:
        return classes.defaultButton;
    }
  };

  const getTypoClassName = (type) => {
    switch (type) {
      case "primary":
        return classes.primaryButtonText;
      case "secondary":
        if (disabled) {
          return classes.secondaryButtonTextDisabled;
        }
        return classes.secondaryButtonText;
      case "white":
        if (disabled) {
          return classes.whiteButtonTextDisabled;
        }
        return classes.whiteButtonText;
      case "tab":
        if (selectedTabButton) {
          return classes.selectedTabButtonTitle;
        }
        return classes.tabButtonTitle;
      case "selectedTabButton":
        return classes.selectedTabButtonTitle;
      default:
        return classes.defaultButtonText;
    }
  };

  const button = (
    <Button
      disabled={disabled}
      onClick={onClick}
      color="primary"
      variant="contained"
      type={submitType && "submit"}
      size="medium"
      className={
        variant && variant !== "" ? getClassName(variant) : buttonStyle
      }
    >
      <div className={classes.container}>
        {icon && (
          <img
            src={icon}
            className={`${classes.buttonIcon} ${iconStyle}`}
            alt="button-icon"
          />
        )}
        <Typography variant="button" className={getTypoClassName(variant)}>
          {text}
        </Typography>
      </div>
    </Button>
  );

  /**
   * the span inside the tooltip is used because of this
   * https://material-ui.com/components/tooltips/#disabled-elements
   */
  const renderActionButton = () => {
    if (shouldRenderTooltip) {
      return (
        <Tooltip disableFocusListener arrow title={tooltipText} placement="top">
          <span>{button}</span>
        </Tooltip>
      );
    }
    return button;
  };

  return renderActionButton();
};

export const ActionButton = withStyles(styles)(ActionButtonRaw);