Toast

---
import {
  Button,
  Toast
} from '@santi020k/lumen-astro'
---

<lumen-toast-demo style="display: block;">
  <div style="display: grid; gap: 1.25rem;">
    <div>
      <strong style="display: block; margin-bottom: 0.625rem;">Common feedback</strong>
      <div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
        <Button data-ex-toast="default" variant="outline">Default</Button>
        <Button data-ex-toast="success">Success</Button>
        <Button data-ex-toast="warning" variant="secondary">Warning</Button>
        <Button data-ex-toast="error" variant="destructive">Error</Button>
      </div>
    </div>

    <div>
      <strong style="display: block; margin-bottom: 0.625rem;">Interactive patterns</strong>
      <div style="display: flex; flex-wrap: wrap; gap: 0.75rem;">
        <Button data-ex-toast="action" variant="outline">With action</Button>
        <Button data-ex-toast="progress" variant="secondary">Loading → success</Button>
        <Button data-ex-toast="dismiss" variant="ghost">Dismiss all</Button>
      </div>
    </div>
  </div>

  <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem;">
    <Toast style="min-width: min(100%, 18rem);">
      <strong>Static toast</strong>
      <p>Useful when feedback already exists in the page markup.</p>
    </Toast>
    <Toast variant="success" style="min-width: min(100%, 18rem);">
      <strong>Changes saved</strong>
      <p>Static Toast markup remains readable without JavaScript.</p>
    </Toast>
  </div>
</lumen-toast-demo>

<script>
  class LumenToastDemo extends HTMLElement {
    connectedCallback() {
      if (this.dataset.ready) return

      this.dataset.ready = 'true'

      const lumenWindow = window as Window & {
        LumenToast?: {
          create: (detail: Record<string, unknown>) => string
          dismiss: (id?: string) => void
          update: (id: string, detail: Record<string, unknown>) => void
        }
      }

      const createToast = (detail: Record<string, unknown>) => lumenWindow.LumenToast?.create(detail)

      const showToast = (type: string | null): void => {
        switch (type) {
          case 'default': {
            createToast({
              description: 'Your draft is ready to keep editing.',
              title: 'Draft saved'
            })

            break
          }

          case 'success': {
            createToast({
              description: 'The latest version is now live.',
              title: 'Published',
              variant: 'success'
            })

            break
          }

          case 'warning': {
            createToast({
              description: 'We will keep retrying in the background.',
              title: 'Connection interrupted',
              variant: 'warning'
            })

            break
          }

          case 'error': {
            createToast({
              description: 'Check the required fields and try again.',
              title: 'Could not save changes',
              variant: 'destructive'
            })

            break
          }

          case 'action': {
            createToast({
              action: { label: 'Undo', value: 'deploy' },
              description: 'lumen-docs was moved to production.',
              duration: 8000,
              title: 'Deployment complete',
              variant: 'success'
            })

            break
          }

          case 'progress': {
            const toastId = createToast({
              description: 'Preparing the production bundle.',
              duration: 10000,
              title: 'Deploying…'
            })

            if (!toastId) return

            window.setTimeout(() => {
              lumenWindow.LumenToast?.update(toastId, {
                description: 'The production bundle is live.',
                duration: 4000,
                title: 'Deployment complete',
                variant: 'success'
              })
            }, 1600)

            break
          }

          case 'dismiss': {
            lumenWindow.LumenToast?.dismiss()

            break
          }
      // No default
        }
      }

      this.addEventListener('click', event => {
        if (!(event.target instanceof Element)) return

        const button = event.target.closest('[data-ex-toast]')

        if (button) showToast(button.getAttribute('data-ex-toast'))
      })
    }
  }

  if (!customElements.get('lumen-toast-demo')) {
    customElements.define('lumen-toast-demo', LumenToastDemo)
  }
</script>

'use client'

import { Button, ToastProvider, useToast } from '@santi020k/lumen-react'

function SaveButton() {
  const toast = useToast()

  return (
    <Button onClick={() => toast.create({ title: 'Preview saved', description: 'Example feedback; no data is persisted.', variant: 'success' })}>
      Show success toast
    </Button>
  )
}

export const Example = () => (
  <ToastProvider placement="bottom-right" maxCount={5}>
    <SaveButton />
  </ToastProvider>
)

<lumen-button id="show-preview-toast">Show success toast</lumen-button>
<lumen-toast variant="success">
  <strong>Static feedback</strong>
  <p>This message remains readable without JavaScript.</p>
</lumen-toast>

<script type="module">
  import { defineLumenElements, LumenToast } from '@santi020k/lumen-elements'

  defineLumenElements()

  document.getElementById('show-preview-toast')?.addEventListener('click', () => {
    LumenToast.create({
      title: 'Preview saved',
      description: 'Example feedback; no data is persisted.',
      variant: 'success'
    })
  })
</script>