department-of-veterans-affairs/vets-website

import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { focusElement } from 'platform/utilities/ui';
import UpToDateVerificationStatement from './UpToDateVerificationStatement';
import VerifiedSuccessStatement from './VerifiedSuccessStatement';
import {
  getPeriodsToVerify,
  getPeriodsToVerifyDGIB,
  isVerificationEndDateValid,
} from '../helpers';
import Alert from './Alert';

const PeriodsToVerify = ({
  enrollmentData,
  link,
  toggleEnrollmentSuccess,
  verifyEnrollment,
  enrollmentVerifications,
  claimantId,
}) => {
  const [pendingEnrollments, setPendingEnrollments] = useState([]);
  const justVerified = !!toggleEnrollmentSuccess;
  const { error } = verifyEnrollment;
  const idRef = useRef();
  const showEnrollmentVerifications = enrollmentVerifications?.some(
    verification =>
      !verification.verificationMethod &&
      isVerificationEndDateValid(verification.verificationEndDate),
  );
  useEffect(
    () => {
      if (
        enrollmentData?.verifications &&
        enrollmentData?.pendingVerifications
      ) {
        const { pendingVerifications } = enrollmentData;
        // add all data to be verified into single array
        setPendingEnrollments(pendingVerifications);
      }
    },
    [enrollmentData],
  );
  useEffect(
    () => {
      if (error) {
        idRef.current = '#error-alert';
        setTimeout(() => {
          focusElement(idRef.current);
        }, 100); // Delay to ensure element is rendered
      } else if (
        enrollmentData?.pendingVerifications?.length === 0 &&
        justVerified
      ) {
        idRef.current = '#success-alert';
        focusElement(idRef.current);
      } else if (
        enrollmentData?.pendingVerifications?.length !== 0 &&
        !justVerified &&
        !error
      ) {
        idRef.current = 'h1';
        focusElement(idRef.current);
      }
    },
    [error, enrollmentData, justVerified, pendingEnrollments],
  );

  return (
    <>
      {error && (
        <Alert
          status="error"
          title=" We’ve run into a problem"
          message=" We’re sorry. Something went wrong on our end. Please try again"
          id="error-alert"
        />
      )}
      <div id="verifications-pending-alert">
        {enrollmentVerifications?.length > 0 &&
          showEnrollmentVerifications && (
            <>
              <va-alert
                close-btn-aria-label="Close notification"
                status="info"
                visible
              >
                <h2
                  id="vye-periods-to-verify-container"
                  slot="headline"
                  className="vads-u-font-size--h3 vads-u-font-weight--bold"
                >
                  You have enrollment periods to verify
                </h2>
                {getPeriodsToVerifyDGIB(enrollmentVerifications, true)}
                {link && <>{link()}</>}
              </va-alert>
            </>
          )}
        {enrollmentData.pendingVerifications?.length > 0 && (
          <va-alert
            close-btn-aria-label="Close notification"
            status="info"
            visible
          >
            <h2
              id="vye-periods-to-verify-container"
              slot="headline"
              className="vads-u-font-size--h3
              vads-u-font-weight--bold"
            >
              You have enrollment periods to verify
            </h2>
            <div>
              {getPeriodsToVerify(pendingEnrollments)}
              {link && <>{link()}</>}
            </div>
          </va-alert>
        )}
        {(enrollmentData?.pendingVerifications?.length === 0 ||
          !showEnrollmentVerifications) &&
          justVerified && (
            <div>
              <VerifiedSuccessStatement />
            </div>
          )}
        {((enrollmentData?.pendingVerifications?.length === 0 &&
          enrollmentData?.verifications.length !== 0) ||
          (!showEnrollmentVerifications &&
            claimantId &&
            error &&
            enrollmentVerifications?.length !== 0)) &&
          !justVerified && (
            <div className="vads-u-margin-top--2">
              <UpToDateVerificationStatement />
            </div>
          )}
      </div>
    </>
  );
};

const mapStateToProps = state => ({
  verifyEnrollment: state.verifyEnrollment,
});

PeriodsToVerify.propTypes = {
  claimantId: PropTypes.number,
  enrollmentData: PropTypes.object,
  enrollmentVerifications: PropTypes.array,
  link: PropTypes.func,
  loading: PropTypes.bool,
  toggleEnrollmentSuccess: PropTypes.bool,
  verifyEnrollment: PropTypes.object,
};
export default connect(mapStateToProps)(PeriodsToVerify);