import {createContext, useContext, useState} from 'react'
import {Snackbar} from 'react-native-paper'
import {CombinedDarkTheme, CombinedDefaultTheme} from './App'
import useDark from './use-dark'
export const SnackbarContext = createContext<{
toast: (value: string, timeout: number) => void
}>({toast: () => null})
export const useSnackbar = () => {
return useContext(SnackbarContext)
}
export default function MassiveSnack({
children,
}: {
children?: JSX.Element[] | JSX.Element
}) {
const [snackbar, setSnackbar] = useState('')
const [timeoutId, setTimeoutId] = useState(0)
const dark = useDark()
const toast = (value: string, timeout: number) => {
setSnackbar(value)
clearTimeout(timeoutId)
const id = setTimeout(() => setSnackbar(''), timeout)
setTimeoutId(id)
}
return (
<>
{children}
setSnackbar('')}
visible={!!snackbar}
action={{
label: 'Close',
onPress: () => setSnackbar(''),
color: dark
? CombinedDarkTheme.colors.background
: CombinedDefaultTheme.colors.background,
}}>
{snackbar}
>
)
}