import { Accordion, AccordionItem } from '@spglobal/react-components';
import React, { useEffect, useState } from 'react';
import ScoringInputs from '@components/ScoringInputs';
import CompanyInformation from '@components/CompanyInformation';
import BackwardForwardButton from '../BackwardForwardButton';
import { useDispatch, useSelector } from 'react-redux';
import { scoringInputsResp } from '@root/store/scoringInputs/scoringInputs.selector';
import styles from './CompanyInformation.scss';
import classNames from 'classnames';
import { companyDataSettingSelector } from '@root/store/companyDataSettings/companyDataSettings.selector';
import { progressTracker } from '@root/store/progressTracker/progressTracker.selector';
import { setEnableNext } from '@root/store/progressTracker/progressTracker.reducer';
import { stepIds } from '@root/constants';
import VersionFooter from '../Common/VersionFooter';

const DataAndScoringCollapse = () => {
    const dispatch = useDispatch();
    const { scoringInputs } = useSelector(scoringInputsResp);
    const { selectedValues } = useSelector(companyDataSettingSelector);
    const { enableNextStep, activeStepId, initProgressSteps } = useSelector(progressTracker);
    const [loadInputsData, setLoadInputsData] = useState(Boolean(scoringInputs?.originalResp));
    const [disableInputs, setDisableInputs] = useState(!Boolean(scoringInputs?.originalResp));
    const [scoringOpen, setScoringOpen] = useState(false);
    const [backClick, setBackClick] = useState(()=>()=>{});

    useEffect(()=>{
        activeStepId !== stepIds.SCORING_INPUTS && !loadInputsData && setDisableInputs(true);
    }, [initProgressSteps]);

    useEffect(()=>{
        if(selectedValues.financialType === '0'){
            if(loadInputsData && !disableInputs){
                dispatch(setEnableNext(true));
            } else {
                dispatch(setEnableNext(false));
            }
        }
    }, [scoringInputs, enableNextStep, disableInputs, selectedValues.financialType]);

    useEffect(()=>{
        activeStepId === stepIds.SCORING_INPUTS && setScoringOpen(true);
    }, [activeStepId]);

    const onBackClick = () => backClick();

return <div className={styles['dataInputs-scoring-container']}>
        <Accordion>
            <AccordionItem
             header='STEP 02: Data Inputs'
             isDefaultOpen={activeStepId === stepIds.COMPANY_DATA_INPUTS}
             className={styles['dataInput-accordian-item']}>
                <CompanyInformation
                 setLoadInputsData={setLoadInputsData}
                 setDisableInputs={setDisableInputs}
                 needValidation={activeStepId === stepIds.COMPANY_DATA_INPUTS}
                 />
            </AccordionItem>
            {selectedValues?.financialType !== '1' ? <AccordionItem
             header='STEP 03: Scoring Inputs'
             isDefaultOpen={scoringOpen}
             onOpenChange={isOpen => setScoringOpen(isOpen)}
             className={classNames(disableInputs && styles['disable-scoring'], styles['dataInput-accordian-item'])}>
                {loadInputsData && <ScoringInputs
                 needValidation={activeStepId === stepIds.SCORING_INPUTS}
                 setBackClick={setBackClick}/>}
            </AccordionItem> : <div></div>}
        </Accordion>
        <div>
            <BackwardForwardButton isRequired={true} onBackClick={onBackClick}/>
        </div>
      <VersionFooter/>
    </div>;
};

export default DataAndScoringCollapse;