import React from "react";
import Button, { ButtonProps } from "antd/es/button";
import { cn } from "@/lib/utils";
import { makeStyles } from "tss-react/mui";

type AppButtonProps = {
  children: React.ReactNode;
  type?: "default" | "primary" | "dashed" | "link" | "text";
  shape?: "circle" | "round" | "default";
  iconPosition?: "start" | "end";
  disabled?: boolean;
  loading?: boolean;
  onClick?: (data?: any) => void;
  className?: string;
  style?: React.CSSProperties;
  size?: "large" | "middle" | "small";
  icon?: React.ReactNode;
  color?: "default" | "primary" | "danger";
  variant?: "outlined" | "dashed" | "solid" | "filled" | "text" | "link";
  htmlType?: "button" | "submit" | "reset";
  primaryColor?: "blue" | "red" | "grey";
  customColor?: string; 
} & ButtonProps;


const useStyle = makeStyles()(() => {
  
  return ({
    button: {
      '&.ant-btn-color-default.ant-btn-variant-solid': {
        backgroundColor: '#6c757d !important',
      },
      '&.ant-btn-color-default.ant-btn-variant-solid:hover': {
        backgroundColor: '#5a6268 !important',
      }
      
    },
  });
}); 

export default function AppButton({
  children,
  type = "primary",
  size = "middle",
  icon,
  disabled = false,
  loading = false,
  onClick,
  className,
  style = {},
  shape,
  color = "primary",
  iconPosition = "start",
  variant = "solid",
  htmlType = "button",
  primaryColor = undefined,
  customColor = undefined,
  ...props
}: AppButtonProps) {

  const getColorClasses = () => {
    if (type !== "primary" || !primaryColor) return;

    switch (primaryColor) {
      case "red":
        return "!bg-red-500 hover:!bg-red-600 text-white px-3 py-2";
      case "grey":
        return "!bg-neutral-500 hover:!bg-neutral-600 text-white px-3 py-2";
      case "blue":
      default:
        return "bg-blue-500 hover:!bg-blue-600 text-white px-3 py-2";
    }
  };
  const { classes } = useStyle();

  return (
    <Button
      color={color}
      htmlType={htmlType}
      type={type}
      variant={variant}
      size={size}
      icon={icon}
      shape={shape}
      disabled={disabled}
      loading={loading}
      onClick={onClick}
      iconPosition={iconPosition}
      className={cn(
        className,
        classes.button,
        primaryColor && getColorClasses(),
        disabled && type === "primary" && "hover:!bg-neutral-100", ' .btn btn btn-info'
      )}
      style={{
        borderRadius: 0,
        backgroundColor: customColor || '',
        ...style
      }}
      {...props}
    >
      {children}
    </Button>
  );
}