<script lang="ts">
  import { onDestroy } from 'svelte'

  import { Notification } from './Notification'
  import store from './store'

  export let notification: Notification

  const { id, closeTimeout } = notification

  const removeNotificationHandler = () => store.removeNotification(id)

  let timeout: number | null = null

  if (closeTimeout) {
    timeout = setTimeout(removeNotificationHandler, closeTimeout)
  }

  onDestroy(() => {
    if (closeTimeout && timeout) {
      clearTimeout(timeout)
    }
  })
</script>

<svelte:component this={notification.component} {notification} onRemove={removeNotificationHandler} />
