PauseAndResumeButton.jsx

import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { Button } from 'reactstrap';
import { toast } from 'react-toastify';
import { PAUSE, RESUME, PROCESSING } from '../../languages/en/ui';
import { UserStatus } from '../../utils/enums';
import ActivationDatePopup from './ActivationDatePopup';
import { boxStyle, boxStyleDark } from '../../styles';
import { updateUserPauseStatus } from '../../actions/userManagement';

/**
 * @param {*} props
 * @param {Boolean} props.isBigBtn
 * @param {*} props.userProfile
 * @returns
 */
function PauseAndResumeButton(props) {
  const { darkMode } = props;
  const [activationDateOpen, setActivationDateOpen] = useState(false);
  const [isActive, setIsActive] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const activationDatePopupClose = () => {
    setActivationDateOpen(false);
  };

  const dispatch = useDispatch();

  useEffect(() => {
    if (props.userProfile?.isActive !== undefined) setIsActive(props.userProfile.isActive);
  }, [props.userProfile?.isActive]);

  /**
   * Call back on Pause confirmation button click to trigger the action to update user status
   */
  const pauseUser = async reActivationDate => {
    setIsLoading(true);
    try {
      await dispatch(updateUserPauseStatus(props.userProfile, UserStatus.Inactive, reActivationDate));
      setIsActive(false);
      setActivationDateOpen(false);
      toast.success('Your Changes were saved successfully.');
    } catch (error) {
      toast.error('Failed to update the user status.');
      // eslint-disable-next-line no-console
      console.error(error);
    } finally {
      setIsLoading(false);
      await props.loadUserProfile();
    }
  };

  /**
   * Call back on Pause or Resume button click to trigger the action to update user status
   */
  const onPauseResumeClick = async (user, status) => {
    if (status === UserStatus.Active) {
      setIsLoading(true);
      try {
        await dispatch(updateUserPauseStatus(props.userProfile, UserStatus.Active, Date.now()));
        setIsActive(true);
        toast.success('Your Changes were saved successfully.');
      } catch (error) {
        toast.error('Failed to update the user status.');
        // eslint-disable-next-line no-console
        console.error(error);
      } finally {
        setIsLoading(false);
        await props.loadUserProfile();
      }
    } else {
      setActivationDateOpen(true);
    }
  };
  return (
    <>
      <ActivationDatePopup
        open={activationDateOpen}
        onClose={activationDatePopupClose}
        onPause={pauseUser}
      />
      <Button
        outline={!darkMode}
        color={isActive ? 'warning' : 'success'}
        disabled={isLoading} // Disable the button while loading
        className={`btn ${darkMode ? '' : `btn-outline-${isActive ? 'warning' : 'success'}`} ${
          props.isBigBtn ? '' : 'btn-sm'
        }  mr-1`}
        onClick={() => {
          onPauseResumeClick(props.userProfile, isActive ? UserStatus.Inactive : UserStatus.Active);
        }}
        style={darkMode ? boxStyleDark : boxStyle}
        data-testid="pause-resume-button"
      >
        {/* eslint-disable-next-line no-nested-ternary */}
        {isLoading ? PROCESSING : isActive ? PAUSE : RESUME} {/* Show loading state */}
        
      </Button>
    </>
  );
}
export default PauseAndResumeButton;