import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch, batch } from 'react-redux';
import { progressTracker } from '@store/progressTracker/progressTracker.selector';
import {
setValidationStatus,
triggerValidationStatus,
isNextLoadingStatus} from '@store/progressTracker/progressTracker.reducer';
import { stepValidationStatus } from '@root/constants';

const WithValidation = Component => function WithValidationHOC(props) {
    const dispatch = useDispatch();
    const [hasTriggerValidation, setTriggerValidation] = useState<boolean>(false);
    const [validationList, setValidationList] = useState([]);
    const { activeStep, isTriggerValidation } = useSelector(progressTracker);
    const validation = props.needValidation === undefined ? true : props.needValidation;

    useEffect(() => {
        if (validationList.length) {
            // eslint-disable-next-line
            console.log('________useEffect HOC')
            const isErrors = validationList.filter(status => status);
            const validationStatus = isErrors.length ? stepValidationStatus.INVALID : stepValidationStatus.VALID;
            batch(() => {
                dispatch(setValidationStatus({
                    stepId: activeStep.stepId, validationStatus,
                    parentStepId: activeStep?.parentStepId
                }));
                if(isErrors.length) {dispatch(isNextLoadingStatus(false));}
                    dispatch(triggerValidationStatus(false));
            });
        }
    }, [validationList]);


    useEffect(() => {
        if (isTriggerValidation) {
            setValidationList([]);
            setTriggerValidation(true);
        }

    }, [isTriggerValidation]);

    const handleValidation = (value: boolean) => {
        if(validation){
            validationList.push(value);
            setValidationList(validationList);
            setTriggerValidation(false);
        }
    };

    return validation ? <Component {...props}
        validationHandler={handleValidation}
        triggerValidation={hasTriggerValidation}
    /> : <Component {...props}/>;
};

export default WithValidation;