import React from 'react'

import { Box } from '../box'
import { useVuiContext, v } from '../core'
import { zIndices } from '../theme'
import { ToastListItem } from './toast.types'

export const toasterWidth = 420

const Toaster = () => {
  const { toasts } = useVuiContext()

  const padding = { md: '16px', sm: '4px', xs: '2px' }
  const right = { md: '1rem', sm: 0, xs: 0 }
  const width = { md: toasterWidth, sm: toasterWidth, xs: '100%' }
  const bottom = toasts?.list?.length ? '1rem' : '-2rem'

  return (
    <Box
      bottom={bottom}
      className="vui-toaster"
      display="block"
      maxW={width}
      minW={width}
      p={padding}
      position="fixed"
      right={right}
      zIndex={zIndices.toast}
    >
      {toasts?.list?.map?.((toast: ToastListItem) => (
        <v.div id={`toast_${toast.id}`} key={toast.id}>
          {toast.component}
        </v.div>
      ))}
    </Box>
  )
}

export default React.memo(Toaster)
