// node modules;
import React, { FC, useState, useEffect } from 'react';
import { CSSTransition } from "react-transition-group";

// local files
import { useStyles } from "./styles";

export const TransitionShowing: FC<any> = ({ children, delay, disabled, ...otherProps }) => {
    const { timeout, className } = otherProps;
    const [showed, setShowed] = useState(false);
    const classes =  useStyles({ theme: { timeout } });

    useEffect(() => {
        if(!disabled && delay !== undefined) {
            setTimeout(() => setShowed(true), delay)
        }
    }, []);

    if(disabled) return children;

    return (
        <CSSTransition
            {...otherProps}
            in={showed}
            unmountOnExit
            classNames={{ ...classes }}
        >
            <div className={className || ''}>
                {children}
            </div>
        </CSSTransition>
    )
}
