import { useEffect } from 'react';
import * as React from 'react';
import { StyleTypes } from '../../styles';
import StyledSnackbar, { Origin } from './styled-snackbar';

interface Props {
    children: React.ReactNode;
    open: boolean;
    onClose: () => void;
    origin: Origin;
    autoClose: boolean;
    color?: string;
    type?: StyleTypes;
    autoHideDuration: number;
}

const Snackbar = (props: Props) => {

    useEffect(() => {
        if(props.open && props.autoClose){
            setTimeout(props.onClose, props.autoHideDuration);
        }
    });

    return(
        <StyledSnackbar
            open={props.open}
            origin={props.origin}
            color={props.color}
            type={props.type}
        >
            {props.children}
        </StyledSnackbar>
    );
};

Snackbar.defaultProps = {
    autoHideDuration: 3000,
    autoClose: true,
    origin: {
        vertical: 'bottom',
        horizontal: 'right',
    },
    onClose: () => {},
};

export default Snackbar;