import React from 'react';
import {ToastComponent as Toast} from '../../components/common/molecules/toast/toast.component';
import {ThemeProviderComponent} from '../../components/providers';
import toast from 'react-hot-toast';
import {INotify, IUseToast} from './use-toast.type';

export const useToast = ({}: IUseToast) => {
    const notify = ({title, description, variant, children, id}: INotify) =>
        toast.custom(
            (t) => (
                <ThemeProviderComponent>
                    {children && children}
                    {!children && (
                        <Toast
                            variant={variant}
                            onClose={() => toast.dismiss(id)}
                            isOpen={t.visible}
                        >
                            {title && <Toast.Title>{title}</Toast.Title>}
                            {description && (
                                <Toast.Description>
                                    {description}
                                </Toast.Description>
                            )}
                        </Toast>
                    )}
                </ThemeProviderComponent>
            ),
            {id},
        );

    return notify;
};