/* eslint-disable @typescript-eslint/no-explicit-any */
import { FC, useCallback } from "react";
import Button from "@mui/material/Button";
import { CircularProgress } from "@mui/material";
import { ButtonWidgetProps, WrappedButtonProps } from "./interface";
import { buttonLayoutStyle } from "./style";
import { green } from "@mui/material/colors";

export const WrappedButton: FC<WrappedButtonProps> = (props) => {
  const {
    text,
    variant,
    // leftIcon,
    // rightIcon,
    tooltipText,
    disabled,
    loading,
    colorScheme,
    handleOnClick,
  } = props;

  const ProgressBar = (
    <CircularProgress
      size={24}
      sx={{
        color: green[500],
        position: "absolute",
        top: "50%",
        left: "50%",
        marginTop: "-12px",
        marginLeft: "-12px",
      }}
    />
  );
  return (
    <Button
      variant={variant}
      disabled={disabled || loading}
      title={tooltipText}
      color="warning"
    key={props.displayName}
      // endIcon={<rightIcon />}
      onClick={handleOnClick}
      sx={{
        height: "100%",
        width: "100%",
        display: "flex",
        justifyContent: "center",
        background: colorScheme,
        borderRadius: "10px",
        ".MuiButton-colorPrimary": {
          background: colorScheme,
        },
        ".Mui-selected": {
          background: colorScheme,
        },
        ".Mui-hover": {
          background: colorScheme,
        },
      }}
    >
      {text}
      {loading && ProgressBar}
    </Button>
  );
};

WrappedButton.displayName = "WrappedButton";

export const ButtonWidget: FC<ButtonWidgetProps> = (props: any) => {
  const handleOnClick = useCallback(() => {
    props.triggerEventHandler("click");
  }, [props]);
  return (
    <div css={buttonLayoutStyle} key={props.displayName}>
      <WrappedButton {...props} handleOnClick={handleOnClick} />
    </div>
  );
};

ButtonWidget.displayName = "ButtonWidget";
