'use client'
import { confirm } from 'react-confirm-alert'

export const deleteFile = () =>
  confirm({
    title: 'Delete “Q3 report.pdf”?',
    message: 'It moves to the trash for 30 days.',
    tone: 'danger',
    confirmLabel: 'Delete',
  })

'use client'
import { confirm } from 'react-confirm-alert'

const save = () => new Promise<void>((r) => setTimeout(r, 1500))

export const publish = () =>
  confirm({
    title: 'Publish changes?',
    confirmLabel: 'Publish',
    onConfirm: save,
  })

'use client'
import { alert } from 'react-confirm-alert'

export const showSaved = () =>
  alert({ title: 'Saved', message: 'Your changes are safe.' })

'use client'
import { prompt } from 'react-confirm-alert'

export const renameFile = () =>
  prompt({
    title: 'Rename file',
    defaultValue: 'Q3 report.pdf',
    validate: (name) => (name.trim() ? null : 'Give it a name'),
  })

'use client'
import { DialogLayout, openDialog } from 'react-confirm-alert'

const plans = ['Free', 'Pro', 'Team']

export const pickPlan = () =>
  openDialog<string>({
    render: ({ close }) => (
      <DialogLayout
        title="Pick a plan"
        message="You can change it at any time."
        actions={plans.map((plan) => ({
          label: plan,
          onClick: () => close(plan),
        }))}
      />
    ),
  }).result

'use client'
import { closeAll, confirm } from 'react-confirm-alert'

export function askThenClose() {
  setTimeout(closeAll, 2000)
  return confirm('This closes in 2 seconds')
}

'use client'
import { useState } from 'react'
import { Dialog, DialogLayout } from 'react-confirm-alert'

export function EditNote() {
  const [open, setOpen] = useState(false)
  const [note, setNote] = useState('')
  return (
    <>
      <button onClick={() => setOpen(true)}>Edit note</button>
      <output>{note}</output>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogLayout
          title="Edit note"
          message={`${note.length} characters`}
          actions={[{ label: 'Done', onClick: () => setOpen(false) }]}
        >
          <textarea
            aria-label="Note"
            value={note}
            onChange={(e) => setNote(e.target.value)}
          />
        </DialogLayout>
      </Dialog>
    </>
  )
}

'use client'
import { useState } from 'react'
import { ConfirmDialog } from 'react-confirm-alert'

export function LeavePage() {
  const [open, setOpen] = useState(false)
  const [left, setLeft] = useState(false)
  return (
    <>
      <button onClick={() => setOpen(true)}>Leave page</button>
      <output>{left && 'onConfirm ran'}</output>
      <ConfirmDialog
        kind="confirm"
        open={open}
        onOpenChange={setOpen}
        title="Leave without saving?"
        confirmLabel="Leave"
        onConfirm={() => setLeft(true)}
      />
    </>
  )
}

'use client'
import { DialogLayout, openDialog } from 'react-confirm-alert'

const save = () => new Promise((r) => setTimeout(r, 1500))

export const renameWorkspace = () =>
  openDialog({
    render: ({ close, dismiss }) => (
      <DialogLayout
        title="Rename workspace"
        message="Everyone in it sees the new name."
        actions={[
          { label: 'Cancel', onClick: dismiss },
          {
            label: 'Save',
            variant: 'primary',
            onClick: () => save().then(() => close()),
          },
        ]}
      >
        <input aria-label="Name" defaultValue="Acme" />
      </DialogLayout>
    ),
  }).result

'use client'
import { useTheme } from 'next-themes'
import { alert } from 'react-confirm-alert'

export function ThemeName() {
  const theme = useTheme().resolvedTheme ?? 'light'
  return <p>This site is in {theme} mode.</p>
}

export function ShowTheme() {
  return (
    <button onClick={() => alert({ title: 'Theme', content: <ThemeName /> })}>
      Show theme
    </button>
  )
}

'use client'
import { configureDialogs, confirm } from 'react-confirm-alert'

// Call once, where your app starts.
export const setThaiLabels = () =>
  configureDialogs({ labels: { confirm: 'ลบ', cancel: 'ยกเลิก' } })

export const deleteInThai = () =>
  confirm({ title: 'ลบไฟล์นี้ไหม', tone: 'danger' })

'use client'
import { confirmAlert } from 'react-confirm-alert'

export function SubmitOrder() {
  return (
    <button
      onClick={() =>
        confirmAlert({
          title: 'Confirm to submit',
          message: 'Are you sure to do this?',
          buttons: [{ label: 'Yes' }, { label: 'No' }],
        })
      }
    >
      Submit
    </button>
  )
}

'use client'
import { confirmAlert } from 'react-confirm-alert'

export function ShowTerms() {
  return (
    <button
      onClick={() =>
        confirmAlert({
          skin: true,
          customUI: ({ onClose }) => (
            <>
              <h1>Terms updated</h1>
              <p>Read what changed before you go on.</p>
              <button data-variant="primary" onClick={onClose}>
                Got it
              </button>
            </>
          ),
        })
      }
    >
      Show terms
    </button>
  )
}