'use client'

import clsx from 'clsx'
import { toast as sonnerToast } from 'sonner'

import { IoClose } from 'react-icons/io5'

import { RootStylesProps, iconStyles, rootStyles } from './Toast.styles'

import { Typography } from '../Typography'

import { getToastColor, getToastIcon } from './Toast.utils'

const { Title, Paragraph } = Typography

type ToastProps = RootStylesProps & {
	id: string | number
	title: string
	description?: string
	hideClose?: boolean
}

function toast({
	title,
	description,
	type,
	hideClose
}: Omit<ToastProps, 'id'>) {
	return sonnerToast.custom(id => (
		<Toast
			id={id}
			title={title}
			description={description}
			type={type}
			hideClose={hideClose}
		/>
	))
}

// // //

function Toast({
	id,
	title,
	description,
	type = 'default',
	hideClose
}: ToastProps) {
	const color = getToastColor(type!)
	//
	return (
		<div className={rootStyles({ type })}>
			<span className={clsx(iconStyles, color)}>
				{getToastIcon(type!)}
			</span>
			<div>
				<div className='flex justify-between gap-x-2.5'>
					<Title
						level={5}
						className={clsx('mt-1 leading-none!', color)}
					>
						{title}
					</Title>
					{!hideClose && (
						<button
							className={color}
							onClick={() => {
								sonnerToast.dismiss(id)
							}}
						>
							<IoClose size={16} />
						</button>
					)}
				</div>
				{description && (
					<Paragraph className={clsx('mt-2.5', color)}>
						{description}
					</Paragraph>
				)}
			</div>
		</div>
	)
}

export { Toast, toast }
