import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useGenerateScore from '@root/hooks/useGenerateScore';
import RGWidgetMfe from '@components/RGWidgetMfe';
import { generatedScoreSelector } from '@root/store/generateScore/generateScore.selector';
import { companyInformation } from '@root/store/companyInformation/companyInformation.selector';
import { userInformationResp } from '@root/store/userInformation/userInformation.selector';
import { companyDataSettingSelector } from '@root/store/companyDataSettings/companyDataSettings.selector';
import { progressTracker } from '@root/store/progressTracker/progressTracker.selector';
import { formatDate } from '@utils/common';
import { setRiskGaugeData } from '@root/store/generateScore/generateScore.reducer';
import { isRgPlusUser } from '@root/store/userInformation/userInformation.reducer';

const GenerateScore = () => {
  useGenerateScore();
  const { generatedScore, riskGaugeData, isLoadingScore } = useSelector(generatedScoreSelector);
  const dispatch = useDispatch();
  const { isCollapsed } = useSelector(progressTracker);
  const { companyData } = useSelector(companyInformation);
  const { userInfo } = useSelector(userInformationResp);
  const { selectedValues = {} } = useSelector(companyDataSettingSelector);
  const { asOfDate, financialType } = selectedValues;
  const [isRgWidgetLoading, setRgWidgetLoading] = useState(true);
  const isRgPlus = useSelector(isRgPlusUser);

  const defaultRgWidgetProps = {
    isLoadingScore,
    isRgWidgetLoading,
    setRgWidgetLoading,
    isServiceError: Boolean(generatedScore?.scoringStatus?.hasError)
  };

  const getUpdatedRiskGauge = data => {
    //Updating the riskGauge data whenever it got updated in results page
    dispatch(setRiskGaugeData(data));
  };

  return (
    <div className="spg-position-relative">
      {isLoadingScore ? <RGWidgetMfe {...defaultRgWidgetProps} /> :
        <RGWidgetMfe
          riskGauge={riskGaugeData}
          getUpdatedRiskGauge={getUpdatedRiskGauge}
          primaryScoreType={userInfo.selectedRgPrimayScoreEnum}
          companyInfo={companyData}
          isCollapsed={isCollapsed}
          asOfDate={formatDate(asOfDate, 'YYYY-MM-DD')}
          financialType={financialType}
          isRGPlusUser={isRgPlus}
          {...defaultRgWidgetProps}
        />
      }
    </div>
  );
};

export default GenerateScore;