import { forwardRef } from 'react';

import { type Theme, useTheme } from '@material-hu/mui/styles';

import Button, {
  type ButtonProps,
} from '@material-hu/components/design-system/Buttons/Button';

import { ServiceManagementTaskStateName } from 'src/pages/dashboard/serviceManagement/utils';

type StatusButtonProps = ButtonProps & {
  stateName?: ServiceManagementTaskStateName;
};

const getStatusStyles = (
  stateName?: ServiceManagementTaskStateName,
  theme?: Theme,
) => {
  switch (stateName) {
    case ServiceManagementTaskStateName.IN_PROGRESS:
      return {
        backgroundColor: theme?.palette.new.graphics.info[700],
        '&:hover': {
          backgroundColor: theme?.palette.new.graphics.info[800],
        },
      };
    case ServiceManagementTaskStateName.ON_HOLD:
      return {
        backgroundColor: theme?.palette.new.graphics.warning[700],
        '&:hover': {
          backgroundColor: theme?.palette.new.graphics.warning[800],
        },
      };
    case ServiceManagementTaskStateName.ASSIGNED:
      return {
        backgroundColor: theme?.palette.new.graphics.purple[500],
        '&:hover': {
          backgroundColor: theme?.palette.new.graphics.purple[600],
        },
      };
    default:
      return undefined;
  }
};

const StatusButton = forwardRef<HTMLButtonElement, StatusButtonProps>(
  ({ stateName, sx, ...props }, ref) => {
    const theme = useTheme();
    const customStyles = getStatusStyles(stateName, theme);

    return (
      <Button
        ref={ref}
        variant="primary"
        sx={{
          ...customStyles,
          ...sx,
        }}
        {...props}
      />
    );
  },
);

StatusButton.displayName = 'StatusButton';

export default StatusButton;
