Sound setting

"use client"

import * as React from "react"
import { SoundSetting, soundOff, type SoundChoice } from "@/components/candor/sound-setting"
import { useAttention } from "@/lib/candor/use-attention"
import { soundEvents } from "@/lib/candor/sound"
import { Button } from "@/components/candor/ui/button"

/*
 * Sounds are off until the person picks "When I'm away" or "Always"; that click is also what lets the browser play
 * audio, so the first event plays once as a preview. The choice lives here, in the app (the kit stores none of it),
 * and goes to useAttention as `sound`. In an app the files come from your brand file (`--cd-sound-needs-you:
 * "/sounds/needs-you.mp3"`); this example sets the same names on the page while it is mounted, which is where the
 * `sounds` starter set puts its files. Without them, Play says no sound is set.
 */
export default function Example() {
  const [choice, setChoice] = React.useState<SoundChoice>(soundOff)
  React.useLayoutEffect(() => {
    for (const e of soundEvents) document.documentElement.style.setProperty(`--cd-sound-${e}`, `"/sounds/${e}.mp3"`)
    return () => {
      for (const e of soundEvents) document.documentElement.style.removeProperty(`--cd-sound-${e}`)
    }
  }, [])
  const attention = useAttention({ sound: { enabled: choice.mode !== "off", when: choice.mode === "away" ? "away" : "always", events: choice.events } })
  return (
    <div className="flex max-w-xl flex-col items-start gap-3 text-sm">
      <SoundSetting value={choice} onValueChange={setChoice} className="w-full" />
      <Button size="sm" variant="outline" onClick={() => attention.signal({ kind: "approval", title: "Approve: raise the export batch size" })}>
        An approval arrives
      </Button>
      <p className="text-xs text-muted-foreground">
        The sound is never the only signal: the count here ({attention.count}) and the “(n)” in the page title say the same while you are away.
      </p>
    </div>
  )
}