Save Bar

"use client"

import * as React from "react"

import { Input } from "@/components/ui/input"

import { IslandBar } from "@/components/blocks/save-bar/island-bar"
import { useIslandBar } from "@/components/blocks/save-bar/use-island-bar"

type Profile = { name: string }

function ProfileForm({ profile }: { profile: Profile }) {
  const [saved, setSaved] = React.useState(profile)
  const [draft, setDraft] = React.useState(profile)

  const bar = useIslandBar({
    dirty: draft.name !== saved.name,
    value: draft,
    onSave: async () => {
      const response = await fetch("/api/profile", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(draft),
      })
      if (!response.ok) throw new Error("The server didn’t accept the change.")
      setSaved(draft)
    },
    onDiscard: () => setDraft(saved),
  })

  return (
    <form onSubmit={(event) => event.preventDefault()}>
      <Input
        aria-label="Name"
        value={draft.name}
        onChange={(event) => setDraft({ name: event.target.value })}
      />
      <IslandBar {...bar.props} />
    </form>
  )
}

export { ProfileForm }

"use client"

import * as React from "react"

import { IslandBar, type IslandBarActions, type IslandBarStatus } from "@/components/blocks/save-bar/island-bar"

type SaveState = "idle" | "saving" | "saved" | "error"

function EditorChrome({
  dirty,
  state,
  error,
  onSave,
  onDiscard,
  children,
}: {
  dirty: boolean
  state: SaveState
  error: string | null
  onSave: () => void
  onDiscard: () => void
  children: React.ReactNode
}) {
  const actions = React.useRef<IslandBarActions>(null)
  const status: IslandBarStatus =
    state === "saving"
      ? "saving"
      : state === "error"
        ? "error"
        : dirty
          ? "dirty"
          : state === "saved"
            ? "saved"
            : "hidden"

  const leave = (event: React.MouseEvent<HTMLAnchorElement>) => {
    if (status === "hidden" || status === "saved") return
    event.preventDefault()
    actions.current?.nudge({ focus: event.detail === 0 })
  }

  return (
    <div className="relative h-full overflow-hidden rounded-xl border">
      <a href="/projects" onClick={leave}>
        All projects
      </a>
      {children}
      <IslandBar
        contained
        status={status}
        error={error ?? undefined}
        actionsRef={actions}
        labels={{ region: "Unsaved page changes", save: "Publish" }}
        onSave={onSave}
        onDiscard={onDiscard}
      />
    </div>
  )
}

export { EditorChrome }

"use client"

import * as React from "react"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

import { IslandBar } from "@/components/blocks/save-bar/island-bar"
import { useIslandBar } from "@/components/blocks/save-bar/use-island-bar"

type Adjustment = { sku: string; delta: number }

const reasons = [
  { value: "received", label: "Received" },
  { value: "damaged", label: "Damaged" },
  { value: "correction", label: "Correction" },
]

function StockAdjustments({
  pending,
  apply,
  clear,
}: {
  pending: Adjustment[]
  apply: (adjustments: Adjustment[], reason: string) => Promise<void>
  clear: () => void
}) {
  const [reason, setReason] = React.useState("correction")
  const bar = useIslandBar({
    dirty: pending.length > 0,
    value: pending,
    onSave: () => apply(pending, reason),
    onDiscard: clear,
  })

  return (
    <IslandBar
      {...bar.props}
      message={`${pending.length} ${pending.length === 1 ? "change" : "changes"}`}
      labels={{ saved: "Stock updated" }}
      extra={
        <Select value={reason} onValueChange={(value) => setReason(value as string)} items={reasons}>
          <SelectTrigger size="sm" aria-label="Reason" className="w-32">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {reasons.map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      }
    />
  )
}

export { StockAdjustments }