import { PluginOptions } from 'vue-toastification';
import ToastContainer, { POSITION, TYPE, useToast } from 'vue-toastification';
import 'vue-toastification/dist/index.css';

interface ShowToastParams {
    message: string;
    type?: TYPE;
    options?: Partial<PluginOptions>;
}

const defaultOptions: PluginOptions = {
    timeout: 3000,
    position: POSITION.BOTTOM_CENTER,
    hideProgressBar: true,
    maxToasts: 1,
    closeOnClick: true,
    pauseOnFocusLoss: true,
    pauseOnHover: true,
    draggable: true,
    draggablePercent: 0.6,
    showCloseButtonOnHover: false,
    closeButton: 'button',
    icon: false,
};

export function useToastNotification() {
    const toast = useToast();

    const customToast = ({ message, type = TYPE.DEFAULT, options = {} }: ShowToastParams): void => {
        toast(message, {
            ...defaultOptions,
            ...options,
            type,
        });
    };

    const successToast = (message: string, options?: Partial<PluginOptions>) =>
        customToast({ message, type: TYPE.SUCCESS, options });

    const errorToast = (message: string, options?: Partial<PluginOptions>) =>
        customToast({ message, type: TYPE.ERROR, options });

    const warningToast = (message: string, options?: Partial<PluginOptions>) =>
        customToast({ message, type: TYPE.WARNING, options });

    const infoToast = (message: string, options?: Partial<PluginOptions>) =>
        customToast({ message, type: TYPE.INFO, options });

    return {
        customToast,
        successToast,
        errorToast,
        warningToast,
        infoToast,
    };
}
export { ToastContainer };
