import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

import OverlayModal from '../../components/modal/Overlay';

const ModalsContainer = ({ modals, removeModal, hideModal, location }) => {
    const [containerIsClosing, setContainerIsClosing] = useState(false);

    useEffect(() => {
        if (location.state && location.state.ignoreClose) {
            return;
        }
        modals.forEach(({ id, content }) => {
            if (!content) {
                return;
            }
            if (content.props.disableCloseOnLocation) {
                return;
            }
            content.props.onClose && content.props.onClose();
            hideModal(id);
        });
    }, [location && location.pathname]);

    useEffect(() => {
        // Start hiding the container if the last modal wants to close
        if (modals.length === 1 && modals[0].isClosing) {
            return setContainerIsClosing(true);
        }

        if (modals.length >= 1) {
            return setContainerIsClosing(false);
        }
    }, [modals]);

    if (modals.length === 0 && !containerIsClosing) {
        return null;
    }

    const list = modals.map(({ id, content, isClosing, isFirst, isLast, isBehind }) => {
        if (!content) {
            return null;
        }

        const handleModalExit = () => {
            content.props.onExit && content.props.onExit();
            removeModal(id);
        };

        const handleModalClose = () => {
            content.props.onClose && content.props.onClose();
            hideModal(id);
        };

        return React.cloneElement(content, {
            onClose: handleModalClose,
            onExit: handleModalExit,
            isFirst,
            isLast,
            isBehind,
            isClosing,
            key: id
        });
    });

    const handleContainerAnimationEnd = () => {
        setContainerIsClosing(false);
    };

    return (
        <>
            <OverlayModal isClosing={containerIsClosing} onExit={handleContainerAnimationEnd} />
            {list}
        </>
    );
};

ModalsContainer.propTypes = {
    modals: PropTypes.arrayOf(PropTypes.object).isRequired,
    removeModal: PropTypes.func.isRequired,
    hideModal: PropTypes.func.isRequired,
    location: PropTypes.object
};

export default withRouter(ModalsContainer);

@@ -84,55 +84,8 @@
 es';
-%0Aimport %7B withRouter %7D from 'react-router-dom';
 %0A%0Aim
@@ -203,18 +203,8 @@
 odal
-, location
  %7D) 
@@ -286,469 +286,8 @@
 );%0A%0A
-    useEffect(() =%3E %7B%0A        if (location.state && location.state.ignoreClose) %7B%0A            return;%0A        %7D%0A        modals.forEach((%7B id, content %7D) =%3E %7B%0A            if (!content) %7B%0A                return;%0A            %7D%0A            if (content.props.disableCloseOnLocation) %7B%0A                return;%0A            %7D%0A            content.props.onClose && content.props.onClose();%0A            hideModal(id);%0A        %7D);%0A    %7D, %5Blocation && location.pathname%5D);%0A%0A
     
@@ -1853,19 +1853,8 @@
 ult 
-withRouter(
 Moda
@@ -1864,11 +1864,10 @@
 ontainer
-)
 ;%0A

Disable automatic close on location