flotilla/src/app/toast.ts

import type {Component} from "svelte"
import {writable} from "svelte/store"
import type {Maybe} from "@welshman/lib"
import {randomId} from "@welshman/lib"
import {copyToClipboard} from "@lib/html"

export type ToastParams = {
  message?: string
  timeout?: number
  theme?: "error"
  children?: {
    component: Component<any>
    props: Record<string, any>
  }
  action?: {
    message: string
    onclick: () => void
  }
}

export type Toast = ToastParams & {
  id: string
}

export const toast = writable<Maybe<Toast>>()

export const pushToast = (params: ToastParams) => {
  const id = randomId()

  toast.set({id, ...params})

  setTimeout(() => popToast(id), params.timeout || 5000)

  return id
}

export const popToast = (id: string) => toast.update($t => ($t?.id === id ? undefined : $t))

export const clip = (value: string) => {
  copyToClipboard(value)
  pushToast({message: "Copied to clipboard!"})
}