"use client"

import React from "react";
import { makeStyles } from "tss-react/mui";
import clsx from "clsx";
import { useAppSelector } from "@/lib/redux/hooks";
import { getInputSettings } from "@/lib/redux/features/serviceAdmin";

type AppButtonProps = {
  children: React.ReactNode;
  type?: "button" | "submit" | "reset";
  color?: "info" | "success" | "danger" | "warning" | "megre" | "black" | "primary";
  iconPosition?: "start" | "end";
  disabled?: boolean;
  loading?: boolean;
  onClick?: (data?: any) => void;
  className?: string;
  style?: React.CSSProperties;
  size?: "large" | "middle" | "small";
  icon?: React.ReactNode;
  primaryColor?: "blue" | "red" | "grey";
  customColor?: any;
  isCancel?: boolean;
};


const useStyle = makeStyles<{inputSetting: any; disabled?: boolean}>()((theme, { inputSetting, disabled }) => {
  return ({
    button: {
      height: inputSetting.height || '38px',
      minHeight: inputSetting.height || undefined,
      maxHeight: inputSetting.height || '38px',
    },
    btnInfo: {
      color: '#fff',
      backgroundColor: '#17a2b8',
      borderColor: '#17a2b8',
      '&:hover': !disabled && {
        backgroundColor: '#138496',
        borderolor: '#138496'
      }
    },
    btnWarning: {
      color: '#212529',
      backgroundColor: '#ffc107',
      borderColor: '#ffc107',
      '&:hover': !disabled && {
        backgroundColor: '#e0a800',
        borderolor: '#e0a800'
      }
    },
    btnDanger: {
      color: '#fff',
      backgroundColor: '#dc3545',
      borderolor: '#dc3545',
      '&:hover': !disabled && {
        backgroundColor: '#b72634',
        borderolor: '#b72634'
      }
    },
    btnMegre: {
      color: '#fff',
      backgroundColor: '#00b27b',
      borderColor: '#00b27b',
      '&:hover': !disabled && {
        backgroundColor: '#03885e',
        borderolor: '#03885e'
      }
    },
    btnSuccess: {
      color: '#fff',
      backgroundColor: '#00b27b',
      borderColor: '#00b27b',
      '&:hover': !disabled && {
        backgroundColor: '#03885e',
        borderolor: '#03885e'
      }
    },
    btnBlack: {
      color: '#fff',
      backgroundColor: '#6c757d',
      borderColor: '#6c757d',
      '&:hover': !disabled && {
        backgroundColor: '#5a6268',
        borderolor: '#5a6268'
      }
    },
  });
}); 

export default function AppButton(props: AppButtonProps) {

  const {
    children,
    type = "button",
    size = "middle",
    icon,
    disabled = false,
    loading = false,
    onClick,
    className = '',
    style = {},
    color = "info",
    iconPosition = "start",
    primaryColor = undefined,
    customColor = undefined,
    isCancel,
    ...argsProps
  } = props
  const inputSetting = useAppSelector(getInputSettings);

  const { classes } = useStyle({ inputSetting, disabled });

  const getClassBtn = (): string => {
    if (customColor !== undefined) {
      return "";
    }
    switch (color) {
      case "danger":
        return classes.btnDanger;
      case "warning":
        return classes.btnWarning;
      case "megre":
        return classes.btnMegre;
      case "success":
        return classes.btnSuccess;
      case "black":
        return classes.btnBlack;
      case "primary":
        return "";
      default:
        return classes.btnInfo;
    }
  }
  
  return (
    <>
      <button
        className={`btn text-nowrap ${classes.button} ${getClassBtn()} ${className}`}
        disabled={disabled}
        type={type || 'button'}
        onClick={onClick}
        style={{...style}}
        {...argsProps}
      >
        {children}
      </button>
    </>
  );
}