import React from 'react'
import { toast } from 'react-toastify'
import { getToastIcon } from './toast.utils'
import OnIcon from '../on-icons'
import OnText from '../on-text'

interface Props {
    title: string
    message: string
}

export const showToast = (title: string, options: { [key: string]: any }) => {
    const { desc, type: notifType, ...restOptions } = options
    const icon = getToastIcon(notifType)

    if (!toast.isActive(title)) {
        toast(<ToastMessage title={title} message={desc} />, {
            ...restOptions,
            type: notifType,
            icon: <OnIcon icon={icon} />,
            style: { display: 'flex', gap: '12px', alignItems: 'flex-start' }
        })
    }
}

const ToastMessage: React.FC<Props> = ({ title, message }) => {
    return (
        <div style={{ flexGrow: 1 }}>
            <OnText size='md' fontWeight='semibold'>
                {title[0].toUpperCase() + title.substring(1)}
            </OnText>
            {!message ? null : <OnText size='sm'>{message}</OnText>}
        </div>
    )
}

export default ToastMessage