import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import {
  Icon,
  Checkbox,
  components,
  hooks,
  Tooltip,
  NotificationTypeWrapper
, utils, IconNames } from '@spglobal/ca-mfe-package-utils';
import WithValidation from '@root/hoc/WithValidation';
import { useTranslation } from 'react-i18next';
import { batch, useDispatch, useSelector } from 'react-redux';
import styles from './SizeAdjustments.scss';
import classNames from 'classnames';
import { useGetSizeAdjustmentsMutation } from '@root/apis/sizeAdjustmentsApi';
import { sizeAdjustmentsResp } from '@root/store/sizeAdjustments/sizeAdjustments.selector';
import {
  fetchSizeAdjustments,
  updateSizeAdjSections,
  updateSizeAdjustments,
  updateLastSelection
} from '@root/store/sizeAdjustments/sizeAdjustments.reducer';
import {
  LoaderOverlay,
  LoaderPosition,
  LoaderType,
  TooltipPlacement
} from '@spglobal/react-components';
import AdjustmentHeader from './../Common/AdjustmentHeader';
import { isRetainValues,
  companyInformation } from '@root/store/companyInformation/companyInformation.selector';
import { companyDataSettingSelector } from '@root/store/companyDataSettings/companyDataSettings.selector';
const { InputField, LoadingBar } = components;
import SelectionEditWrapper from '../SelectionEditWrapper/index';
import _ from 'lodash';
import { setActiveStep, setValidationStatus, skipCurrentStep } from '@root/store/progressTracker/progressTracker.reducer';
import { platforms, stepIds, stepValidationStatus, getRegexPatterns } from '@root/constants';
import { progressTracker } from '@root/store/progressTracker/progressTracker.selector';
import BackwardForwardButton from '../BackwardForwardButton';
import useGenerateScore from '@root/hooks/useGenerateScore';
import { setEditPreferences } from '@root/store/scoringSelection/scoringSelection.reducer';
import { isRgPlusUser, decimalSettings } from '@root/store/userInformation/userInformation.reducer';
import VersionFooter from '../Common/VersionFooter';
import { parseSizeAdjustmentNumber, addDecimalBasedOnValue, trimValueToLength,
   setDecimalLength } from '@root/utils/common';

const { useToastNotification, addNotificationWrapper } = hooks;
let prevResp = {
  originalResp: {} ,
  currentResp: {}
};

const checkPropDataSource = (companyDataSettings, isPropCompany) => (
    companyDataSettings?.selectedValues?.selectPeriod?.restatementType === 'LP'
      || isPropCompany);

const getInputValue = value => (value < 0 || value === '' || value === null) ? '' : Number(value);

const getSizeAdjCheck = (sizeAdjustments, resp) => sizeAdjustments?.sizeAdjSections?.totalEmployees ?
  { totalRevenue: false, totalAssets: false, totalEmployees: true } :
  sizeAdjustments?.sizeAdjSections?.totalAssets ?
    { totalRevenue: false, totalAssets: true, totalEmployees: false } :
    sizeAdjustments?.sizeAdjSections?.totalRevenue ?
      { totalRevenue: true, totalAssets: false, totalEmployees: false } :
      resp?.data?.data?.totalEmployees?.isPropData ? { totalRevenue: false, totalAssets: false, totalEmployees: true } :
        resp?.data?.data?.totalAssets?.isPropData ? { totalRevenue: false, totalAssets: true, totalEmployees: false } :
          resp?.data?.data?.totalRevenue?.isPropData ? { totalRevenue: true, totalAssets: false, totalEmployees: false } :
            sizeAdjustments?.sizeAdjSections?.totalEmployees?.value > -1 || resp?.data?.data?.totalEmployees?.value > -1
              ? { totalRevenue: false, totalAssets: false, totalEmployees: true } :
              sizeAdjustments?.sizeAdjSections?.totalAssets?.value > -1 || resp?.data?.data?.totalAssets?.value > -1 ?
                { totalRevenue: true, totalAssets: false, totalEmployees: false }
                : { totalRevenue: true, totalAssets: false, totalEmployees: false };

const SizeAdjustments = props => {
  useGenerateScore();
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const { addNotification } = useToastNotification();
  const [isLoading, setIsLoading] = useState(true);
  const [updatedRevenue, setUpdatedRevenue] = useState({});
  const [loadSizeAdjustments] = useGetSizeAdjustmentsMutation();
  const { sizeAdjustments,sizeAdjSections,lastSelection } = useSelector(sizeAdjustmentsResp);
  const { activeStep } = useSelector(progressTracker);
  const { companyData } = useSelector(companyInformation);
  const { companyId, csCompanyId, isPropCompany, isUnlinkCompany } = companyData;
  const retainValues = useSelector(isRetainValues);
  const companyDataSettings = useSelector(companyDataSettingSelector);
  const {companySelectedData, hasStates} = useSelector(companyInformation);
  const [sizeAdjSectionsValue, setSizeAdjSectionsValue] = useState(sizeAdjSections);
  const originalRespData = sizeAdjustments?.originalResp?.data;
  const [sizeAdjustmentData, setSizeAdjustmentData] = useState([]);
  const [isInputValid, setisInputValid] = useState({
    'totalAssets': true,
    'totalEmployees': true
  });
  const [resetInputs, setResetInputs] = useState({
    'totalAssets': false,
    'totalEmployees': false
  });
  const countryCode = companySelectedData?.country?.value;
  const stateCode = hasStates ? companySelectedData?.state?.code : null;
  const industry = companySelectedData?.industry?.value;
  const period = companyDataSettings?.selectedValues?.selectPeriod?.value;
  const asOfDate = companyDataSettings?.selectedValues?.asOfDate;
  const periodType = companyDataSettings?.selectedValues?.periodType?.label;
  const periodYear = companyDataSettings?.selectedValues?.selectPeriod?.value;
  const periodQuarter = 4;
  const currentRespData = sizeAdjustments?.currentResp?.data;

  const [userInputs, setUserInputs] = useState({});
  const { accessibilityOnUI: { handleAccessibilityKeys } } = utils;

  const isRgPlus = useSelector(isRgPlusUser);
  const decimalValue = useSelector(decimalSettings);
  const exp = getRegexPatterns();

  const cursorPositionRef = useRef(null);
  const decimalLenRef = useRef({});
  const [inputState, setInputState] = useState({
    inputValues: {},
    validationErrors: {}
  });

  useLayoutEffect(() => {
    if (cursorPositionRef.current) {
      const { cursorPosition, element } = cursorPositionRef.current;
      try {
        element.setSelectionRange(cursorPosition, cursorPosition);
        // eslint-disable-next-line no-empty
      } catch (err) { }
      cursorPositionRef.current = null;
    }
  }, [inputState.inputValues]);


  useEffect(() => {
    if (sizeAdjustments?.currentResp) {
      setSizeAdjustmentData(sizeAdjustments.currentResp);
    }
  }, [sizeAdjustments?.currentResp]);

  const fetchSizeAdj = async () => {
    setIsLoading(true);
    const isPropDataSource = checkPropDataSource(companyDataSettings, isPropCompany);
    try {
      const payload = {
        ...(!isUnlinkCompany && { companyId }),
        ...(isPropDataSource && { datasource: platforms.CIQPROP }),
        ...(csCompanyId && { csCompanyId }),
        countryCode, industry, asOfDate, stateCode,
        settings: { periodType, periodQuarter, periodYear },
        version: isRgPlus ? 'V3' : 'V2'
      };
      const resp: any = await loadSizeAdjustments(payload);

     dispatch(fetchSizeAdjustments({
      ...resp?.data,
      originalRevenue:  {'revenueRange':resp?.data?.data?.totalRevenue?.revenueRange,
      'isPropData':originalRespData?.totalRevenue?.isPropData,
      'value': resp?.data?.data?.totalRevenue?.revenueRange },
      countryCode,
      industry,
      asOfDate,
      period,
      companyId,
      stateCode
    }));
    const sizeAdjCheck = getSizeAdjCheck(sizeAdjustments, resp);

    if(lastSelection === null){
    setSizeAdjSectionsValue(sizeAdjCheck);
    dispatch(updateSizeAdjSections(sizeAdjCheck));
    }
    retainValues && currentRespData &&
    dispatch(updateSizeAdjustments({...resp?.data,
      data:{...currentRespData,
      revenueBuckets: resp?.data?.data?.revenueBuckets,
      totalRevenue : {'revenueRange': (prevResp?.currentResp?.data?.totalRevenue?.revenueRange ===
        prevResp?.originalResp?.data?.totalRevenue?.revenueRange) ? resp?.data?.data?.totalRevenue?.revenueRange :
        resp?.data?.data?.revenueBuckets?.findIndex(bucket =>
          bucket?.displayValue === prevResp?.currentResp?.data?.totalRevenue?.revenueRange) === -1 ?
        resp?.data?.data?.totalRevenue?.revenueRange : prevResp?.currentResp?.data?.totalRevenue?.revenueRange,
        'isPropData':resp?.data?.data?.totalRevenue?.isPropData,
        'value': (prevResp?.currentResp?.data?.totalRevenue?.value ===
          prevResp?.originalResp?.data?.totalRevenue?.value) ? resp?.data?.data?.totalRevenue?.value :
          prevResp?.currentResp?.data?.totalRevenue?.value },
      totalEmployees: {'value':(prevResp?.currentResp?.data?.totalEmployees?.value ===
        prevResp?.originalResp?.data?.totalEmployees?.value) ? resp?.data?.data?.totalEmployees?.value :
        prevResp?.currentResp?.data?.totalEmployees?.value,
      'isPropData':resp?.data?.data?.totalEmployees?.isPropData },
      totalAssets : {'value':(prevResp?.currentResp?.data?.totalAssets?.value ===
        prevResp?.originalResp?.data?.totalAssets?.value) ? resp?.data?.data?.totalAssets?.value :
        prevResp?.currentResp?.data?.totalAssets?.value,
      'isPropData':resp?.data?.data?.totalAssets?.isPropData }
      }}));
     setIsLoading(false);
    } catch (error) {
       addNotificationWrapper(t('scoringui:errorNotificationMsg'), NotificationTypeWrapper.ERROR, addNotification);
    }
   };

  useEffect(() => {
      if(sizeAdjustments?.currentResp?.countryCode !== countryCode ||
      sizeAdjustments?.currentResp?.stateCode !== stateCode ||
      sizeAdjustments?.currentResp?.industry !== industry ||
      sizeAdjustments?.currentResp?.asOfDate !== asOfDate ||
      sizeAdjustments?.currentResp?.period !== period ||
        sizeAdjustments?.currentResp?.companyId !== companyId ) {
        if(retainValues && currentRespData){
        prevResp = sizeAdjustments;
      }
      fetchSizeAdj();
    } else {
      setIsLoading(false);
    }
  }, []);


  useEffect(() => {
    if (currentRespData?.totalAssets?.value !== undefined) {
      const valNum = addDecimalBasedOnValue(currentRespData.totalAssets.value, decimalValue) || '';
      const regex = new RegExp(exp.positiveNumeric);
      const isValid = regex.test(valNum);
      setInputState(prevState => ({
        ...prevState,
        inputValues: {
          ...prevState.inputValues,
          [key]: valNum
        },
        validationErrors: {
          ...prevState.validationErrors,
          [key]: !isValid
        }
      }));

      const key = t('scoringui:sizeAdjustments:totalAssets');
      if (!(key in decimalLenRef.current)) {
        const decimalPart = String(valNum).split('.')[1] || '';
        decimalLenRef.current[key] = setDecimalLength(decimalPart, valNum, decimalValue);
      }
    }
  }, [currentRespData?.totalAssets?.value]);

  useEffect(()=>{
    if(resetInputs.totalAssets || resetInputs.totalEmployees){
      setTimeout(()=>{
        setResetInputs({'totalAssets': false, 'totalEmployees': false});
        setisInputValid({'totalAssets': true, 'totalEmployees': true});
      }, 100);
    }
  }, [resetInputs]);

  const getRevenueBuckets = () => {
    const revenueData = currentRespData?.revenueBuckets;
    return revenueData?.map(c => ({
      value: c?.displayValue,
      label: c?.displayValue
    }));
  };
  const onEditClick = () => {
    const handleInputData = _.cloneDeep(sizeAdjustmentData);
    handleInputData.isEdit = true;
    const updateAdjustments = _.cloneDeep(sizeAdjustments);
    updateAdjustments.currentResp = { ...handleInputData };
    dispatch(updateSizeAdjustments(updateAdjustments?.currentResp));
    setSizeAdjustmentData(updateAdjustments?.currentResp);
  };

  const onRadioClick = event => {
    let updateAdjSection = {...sizeAdjSectionsValue};
    if (event.target.id === 'totalRevenue') {
      updateAdjSection = {
        totalRevenue: true,
        totalAssets: false,
        totalEmployees: false
      };
    } else if (event.target.id === 'totalAssets') {
      updateAdjSection = {
        totalRevenue: false,
        totalAssets: true,
        totalEmployees: false
      };
    } else if (event.target.id === 'totalEmployees') {
      updateAdjSection = {
        totalRevenue: false,
        totalAssets: false,
        totalEmployees: true
      };
    }

    !isInputValid.totalAssets && setResetInputs(prev => ({...prev, 'totalAssets': true}));
    !isInputValid.totalEmployees && setResetInputs(prev => ({...prev, 'totalEmployees': true}));

    setSizeAdjSectionsValue(updateAdjSection);
    batch(() => { dispatch(
      updateSizeAdjSections({ ...updateAdjSection})
    );
    dispatch(
      updateLastSelection(true)
    );});
  };

  const onHandleChange = (adjustment, value) => {
    const checkOnlyPositive = new RegExp(exp.positiveNumeric);
    const isNotValidValue = ['', null].includes(typeof value === 'string' ? value.trim() : value);
    if (adjustment === 'revenueRange') {
      setUpdatedRevenue(value);
      dispatch(
        updateSizeAdjustments({ ...sizeAdjustments?.currentResp,
          data:{...currentRespData,totalRevenue: {'revenueRange':value?.value,
          'isPropData':originalRespData?.totalRevenue?.isPropData,
          'value': value?.value }},isEdit: false })
      );
    } else if (adjustment === 'totalAssets') {
      const checkForPositives = !isNotValidValue ? checkOnlyPositive.test(value) : true;
      let val = addDecimalBasedOnValue(value, decimalValue) || '';
       val = !isNotValidValue ? val : null;
      setisInputValid(prevState => ({...prevState, 'totalAssets': Boolean(checkForPositives && val)}));
      checkForPositives && dispatch(
        updateSizeAdjustments({ ...sizeAdjustments?.currentResp, data:{...currentRespData,
          totalAssets:{value: val,'isPropData':originalRespData?.totalAssets?.isPropData }}})
      );
      setUserInputs(prevState => ({...prevState, 'totalAssets': value}));
    } else {
      const checkForPositives = !isNotValidValue ? checkOnlyPositive.test(value) : true;
      const val = !isNotValidValue ? Number(value) : null;
      setisInputValid(prevState => ({...prevState, 'totalEmployees': Boolean(checkForPositives && val)}));
      checkForPositives && dispatch(
        updateSizeAdjustments({ ...sizeAdjustments?.currentResp,data:{...currentRespData,
          totalEmployees: {value: val,'isPropData':originalRespData?.totalEmployees?.isPropData }}})
      );
      setUserInputs(prevState => ({...prevState, 'totalEmployees': value}));
    }

    if(activeStep?.stepId !== stepIds.SIZE_ADJUSTMENTS){
      dispatch(setActiveStep({ stepId: stepIds.SIZE_ADJUSTMENTS, parentStepId: stepIds.ADJUSTMENTS }));
      dispatch(setValidationStatus({ stepId: stepIds.SIZE_ADJUSTMENTS,
        validationStatus: stepValidationStatus.NOT_VALIDATED,
        parentStepId: stepIds.ADJUSTMENTS
      }));
    }
  };

  const revenueSelectionChange = value => {
    setUpdatedRevenue(value);
  };

  const updateOnNextClick = () => {
    const value = updatedRevenue?.value || currentRespData?.totalRevenue?.revenueRange;
    dispatch(
      updateSizeAdjustments({
        ...sizeAdjustments.currentResp,
        data:{...currentRespData,totalRevenue: {'revenueRange':value,
        'isPropData':originalRespData?.totalRevenue?.isPropData,
        value }},
        isEdit:false
      })
    );
  };

  const closeEdits = () => {
    dispatch(
    updateSizeAdjustments({
      ...sizeAdjustments.currentResp,
      isEdit:false
    })
    );
  };

  const skipStep = () => {
    batch(()=>{
      dispatch(skipCurrentStep({
        stepId: stepIds.ADJUSTMENTS,
        nestedStepId: stepIds.SIZE_ADJUSTMENTS
      }));
      dispatch(setEditPreferences({remove: stepIds.SIZE_ADJUSTMENTS}));
    });
  };

  const inputSuffixIcon = (title, name, value) => {
    const userInput = userInputs[name] === undefined ? value : userInputs[name];
    return <span className={classNames('spg-d-inline-block spg-ml-2xs invalid-icon')}>
    <Tooltip
      width='160'
      placement={'top'}
      triggerElement={
        <span className='spg-ml-xs'>
          <Icon
            color='red'
            icon={IconNames.CAUTION}
          />
        </span>
      }
    >
      <div>
        {!userInput ? _.unescape(t('scoringui:scoringInputs:requiredFieldText',{fieldName: title})) :
         (isNaN(userInput) ? t('scoringui:scoringInputs:enterValidValueText') :
          t('scoringui:scoringInputs:enterValueGreaterZero'))}
      </div>
    </Tooltip>
  </span>;
  };

  const handleInputChange = (event, decimalValue,
    setInputState, cursorPositionRef, decimalLenRef) => {
    const value = trimValueToLength(event.target.value) ?? event.target.value;
    if (value !== event.target.value) { return; }
    const name = t('scoringui:sizeAdjustments:totalAssets');
    const key = `${name}`;
    const inputElement = event.target;
    const cursorPosition = inputElement.selectionStart;

    const regex = new RegExp(exp.positiveNumeric);
    const isValid = regex.test(value);

    const formatted = addDecimalBasedOnValue(value, decimalValue);
    const decimalPart = String(formatted).split('.')[1] || '';
    decimalLenRef.current[key] = setDecimalLength(decimalPart, formatted, decimalValue);

    // Save cursor position
    cursorPositionRef.current = {
      cursorPosition,
      element: inputElement
    };

    setInputState(prevState => ({
      ...prevState,
      inputValues: {
        ...prevState.inputValues,
        [key]: value
      },
      validationErrors: {
        ...prevState.validationErrors,
        [key]: !isValid
      }
    }));
  };

  return (
    <div className={styles['sizeadjustments-input-container']}>
      {isLoading && (
        <LoadingBar
          type={LoaderType.TOP}
          position={LoaderPosition.STATIC}
          overlay={LoaderOverlay.DEFAULT}
        ></LoadingBar>
      )}
      {!isLoading && (
        <div>
          <AdjustmentHeader
            wrapperClasses={styles['section-title']}
            adjHeader={t('scoringui:stepTracker:sizeAdjustments')}
            onSkip={skipStep}
          />
          <div className="spg-mb-md spg-text spg-text-medium">
            {t('scoringui:sizeAdjustments:sizeAdjustmentsText')}
          </div>
          <div className="spg-ml-md">
            <div className="spg-d-flex spg-align-center spg-mb-sm">
              <div className="spg-row spg-w-25">
                <Checkbox
                  label={t('scoringui:sizeAdjustments:totalRevenueLabel')}
                  id="totalRevenue"
                  checked={sizeAdjSectionsValue?.totalRevenue}
                  onKeyDown={e=>handleAccessibilityKeys(e, {
                    onEnter: () => onRadioClick({
                      target: { id: 'totalRevenue'}
                    })
                  })}
                  onChange={onRadioClick}
                  isRounded
                />
                <Tooltip
                   size={utils.Helpers.Size.LARGE}
                  placement={TooltipPlacement.TOP}
                  triggerElement={
                    <span className='spg-ml-xs'>
                  <Icon icon={IconNames.CIRCLE_INFO_O} size={utils.Helpers.Size.XSMALL} />
                </span>
                  }
                  >
                <div>
                    {t('scoringui:sizeAdjustments:totalRevenueToolTip')}
                  </div>
                </Tooltip>
              </div>
              <div
                className={
                  !sizeAdjSectionsValue?.totalRevenue
                    ? classNames(styles['disable-div'], 'spg-text')
                    : 'spg-text'
                }
              >
                <SelectionEditWrapper
                  data={getRevenueBuckets()}
                  defaultItem={
                    !(
                      originalRespData?.totalRevenue?.revenueRange === '0' ||
                      originalRespData?.totalRevenue?.revenueRange === '-1'
                    )
                      ? {
                          label: originalRespData?.totalRevenue?.revenueRange,
                          value: originalRespData?.totalRevenue?.revenueRange
                        }
                      : {
                          label:
                          originalRespData?.revenueBuckets[0]?.displayValue,
                          value:
                          originalRespData?.revenueBuckets[0]?.displayValue
                        }
                  }
                  selectedItem={
                    currentRespData?.totalRevenue?.revenueRange
                      ? {
                          label: currentRespData?.totalRevenue?.revenueRange,
                          value: currentRespData?.totalRevenue?.revenueRange
                        }
                      : currentRespData?.originalRevenue ? {
                          label: currentRespData?.totalRevenue?.originalRevenue,
                          value: currentRespData?.totalRevenue?.originalRevenue
                        }
                      : {
                        label:
                        originalRespData?.revenueBuckets[0]?.displayValue,
                        value:
                        originalRespData?.revenueBuckets[0]?.displayValue
                      }
                  }
                  getSelectedItem={value =>
                    onHandleChange('revenueRange', value)
                  }
                  onSelectionChange={val => revenueSelectionChange(val)}
                  onEditClick={() =>
                    onEditClick()
                  }
                  isEditSection={sizeAdjustments?.currentResp?.isEdit}
                  isProp={currentRespData?.totalRevenue?.isPropData}
                />
              </div>
            </div>
            <div className="spg-d-flex spg-align-center spg-mb-md">
              <div className="spg-row spg-w-25">
                <Checkbox
                  label={t('scoringui:sizeAdjustments:totalAssetsLabel')}
                  id="totalAssets"
                  onKeyDown={e=>handleAccessibilityKeys(e, {
                    onEnter: () => onRadioClick({
                      target: { id: 'totalAssets'}
                    })
                  })}
                  checked={sizeAdjSectionsValue?.totalAssets}
                  onChange={onRadioClick}
                  isRounded
                />
               <Tooltip
                  size={utils.Helpers.Size.LARGE}
                  placement={TooltipPlacement.TOP}
                  triggerElement={
                    <span className='spg-ml-xs'>
                  <Icon icon={IconNames.CIRCLE_INFO_O} size={utils.Helpers.Size.XSMALL} />
                </span>
                  }
                  >
                <div>
                    {t('scoringui:sizeAdjustments:totalAssetsToolTip')}
                  </div>
                </Tooltip>
              </div>
              <div className={
                  classNames(styles['field-value'],
                  (currentRespData?.totalAssets?.isPropData) && styles['color-green'],
                  'spg-text',
                  ((!sizeAdjSectionsValue?.totalAssets ||
                     originalRespData?.totalAssets?.value !== currentRespData?.totalAssets?.value) &&
                   styles.opacity)
                  )}>
                    {originalRespData?.totalAssets?.value < 0 ? '' :
                     parseSizeAdjustmentNumber(originalRespData?.totalAssets?.value, decimalValue)}
                </div>
              <div className="spg-text">
                {!resetInputs.totalAssets && <InputField
                  name="totAssets"
                  onBlur={value => onHandleChange('totalAssets', value)}
                  onChange={e => {
                      handleInputChange(e, decimalValue, setInputState,
                        cursorPositionRef, decimalLenRef);
                  }}
                  customTextRegEx={exp.positiveNumeric}
                  placeholder="Enter Value"
                  disabled={!sizeAdjSectionsValue?.totalAssets}
                  value={inputState.inputValues[t('scoringui:sizeAdjustments:totalAssets')]}
                  triggerValidation={props.triggerValidation}
                  validationcallback={props.validationHandler}
                  isRequired={sizeAdjSectionsValue?.totalAssets}
                  feedbackText=''
                  requiredFeedbackText=''
                  elementProps={{componentSize: 'small'}}
                  endParanthesis={true}
                  suffix={inputSuffixIcon(
                    t('scoringui:sizeAdjustments:totalAssetsLabel'),
                    t('scoringui:sizeAdjustments:totalAssets'),
                    getInputValue(currentRespData?.totalAssets?.value))}
                  {...(decimalLenRef.current[t('scoringui:sizeAdjustments:totalAssets')] !== undefined && {
                    decimalLength: decimalLenRef.current[t('scoringui:sizeAdjustments:totalAssets')],
                    fixedDecimals: true
                  })}
                />}
              </div>
            </div>
            <div className="spg-d-flex spg-align-center">
              <div className="spg-row spg-w-25">
                <Checkbox
                  label={t('scoringui:sizeAdjustments:totalEmployeesLabel')}
                  id="totalEmployees"
                  onKeyDown={e=>handleAccessibilityKeys(e, {
                    onEnter: () => onRadioClick({
                      target: { id: 'totalEmployees'}
                    })
                  })}
                  checked={sizeAdjSectionsValue?.totalEmployees}
                  onChange={onRadioClick}
                  isRounded
                />
                 <Tooltip
                  size={utils.Helpers.Size.LARGE}
                  placement={TooltipPlacement.TOP}
                  triggerElement={
                    <span className='spg-ml-xs'>
                  <Icon icon={IconNames.CIRCLE_INFO_O} size={utils.Helpers.Size.XSMALL} />
                </span>
                  }
                  >
                <div>
                    {t('scoringui:sizeAdjustments:totalEmployeesToolTip')}
                  </div>
                </Tooltip>
              </div>
              <div className={
                  classNames(styles['field-value'],
                  (currentRespData?.totalEmployees?.isPropData) && styles['color-green'],
                  'spg-text',
                  ( (!sizeAdjSectionsValue?.totalEmployees ||
                    originalRespData?.totalEmployees?.value !== Math.abs(currentRespData?.totalEmployees?.value)) &&
                   styles.opacity)
                  )}>
                    {originalRespData?.totalEmployees?.value < 0 ? '' :
                    originalRespData?.totalEmployees?.value }
                </div>
              <div className="spg-text">
                {!resetInputs.totalEmployees && <InputField
                  name="totEmp"
                  value={getInputValue(currentRespData?.totalEmployees?.value)}
                  customTextRegEx={exp.positiveNumeric}
                  onBlur={value => onHandleChange('totalEmployees', value)}
                  placeholder="Enter Value"
                  disabled={!sizeAdjSectionsValue.totalEmployees}
                  decimalLength={2}
                  triggerValidation={props.triggerValidation}
                  validationcallback={props.validationHandler}
                  isRequired={sizeAdjSectionsValue.totalEmployees}
                  feedbackText=''
                  requiredFeedbackText=''
                  elementProps={{componentSize: 'small'}}
                  endParanthesis={true}
                  fixedDecimals={true}
                  suffix={inputSuffixIcon(
                    t('scoringui:sizeAdjustments:totalEmployeesLabel'),
                    'totalEmployees',
                    getInputValue(currentRespData?.totalAssets?.value))}
                />}
              </div>
            </div>
          </div>
        </div>
      )}
      <div className="spg-col">
        <BackwardForwardButton onBackClick={closeEdits} onNextClick={updateOnNextClick} />
      </div>
        <VersionFooter/>
    </div>
  );
};

export default WithValidation(SizeAdjustments);