Notes

'use client'

import clsx from 'clsx'
import type React from 'react'
import { useEffect, useState } from 'react'
import { Badge } from './badge'
import { Checkbox, CheckboxField } from './checkbox'
import { Description, Field, FieldGroup, Label } from './fieldset'
import { FormDialog } from './form-dialog'
import { Textarea } from './textarea'

export type Note = {
  id: string
  body: string
  author: string
  date: string
  pinned?: boolean
}

export function NoteList({
  notes,
  emptyLabel = 'No notes yet.',
  className,
  ...props
}: { notes: Note[]; emptyLabel?: string } & React.ComponentPropsWithoutRef<'ul'>) {
  if (notes.length === 0) {
    return (
      <p
        {...(props as React.ComponentPropsWithoutRef<'p'>)}
        className={clsx(className, 'text-base/6 sm:text-sm/6 text-zinc-500 dark:text-zinc-400')}
      >
        {emptyLabel}
      </p>
    )
  }

  let sorted = [...notes].sort((a, b) => Number(Boolean(b.pinned)) - Number(Boolean(a.pinned)))

  return (
    <ul role="list" {...props} className={clsx(className, 'divide-y divide-zinc-950/5 dark:divide-white/5')}>
      {sorted.map((note) => (
        <li key={note.id} className="py-4 first:pt-0 last:pb-0">
          <p className="text-base/6 text-zinc-950 text-pretty sm:text-sm/6 dark:text-white">{note.body}</p>
          <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1">
            <p className="text-base/6 sm:text-sm/6 text-zinc-500 dark:text-zinc-400">
              {note.author} · {note.date}
            </p>
            {note.pinned && <Badge color="amber">Pinned</Badge>}
          </div>
        </li>
      ))}
    </ul>
  )
}

export function NoteDialog({
  open,
  onClose,
  onSubmit,
  title = 'Add note',
  description = 'Notes stay internal. Only your team sees them.',
  placeholder = 'What should the team know?',
  maxLength = 2000,
  submitLabel = 'Add note',
}: {
  open: boolean
  onClose: () => void
  onSubmit: (note: { content: string; pinned: boolean }) => void | Promise<void>
  title?: React.ReactNode
  description?: React.ReactNode
  placeholder?: string
  maxLength?: number
  submitLabel?: React.ReactNode
}) {
  let [content, setContent] = useState('')
  let [pinned, setPinned] = useState(false)
  let [pending, setPending] = useState(false)

  useEffect(() => {
    if (open) {
      setContent('')
      setPinned(false)
      setPending(false)
    }
  }, [open])

  let remaining = maxLength - content.length

  return (
    <FormDialog
      open={open}
      onClose={onClose}
      onSubmit={async () => {
        setPending(true)
        try {
          await onSubmit({ content, pinned })
          onClose()
        } finally {
          setPending(false)
        }
      }}
      size="lg"
      title={title}
      description={description}
      submitLabel={submitLabel}
      submitDisabled={pending || content.trim() === ''}
    >
      <FieldGroup>
        <Field>
          <Label>Note</Label>
          <Textarea
            value={content}
            name="content"
            rows={5}
            maxLength={maxLength}
            placeholder={placeholder}
            onChange={(event) => setContent(event.target.value)}
          />
          <Description aria-live="polite" className={remaining > 200 ? 'sr-only' : undefined}>
            {remaining <= 200 ? `${remaining} characters left.` : ''}
          </Description>
        </Field>
        <CheckboxField>
          <Checkbox checked={pinned} onChange={setPinned} name="is_pinned" />
          <Label>Pin this note</Label>
          <Description>Pinned notes stay at the top of the list.</Description>
        </CheckboxField>
      </FieldGroup>
    </FormDialog>
  )
}

<script setup lang="ts">
import { computed, reactive, ref, watch } from 'vue'
import Checkbox from './checkbox.vue'
import CheckboxField from './checkbox-field.vue'
import Description from './description.vue'
import Field from './field.vue'
import FieldGroup from './field-group.vue'
import FormDialog from './form-dialog.vue'
import Label from './label.vue'
import Textarea from './textarea.vue'

const props = withDefaults(
  defineProps<{
    title?: string
    description?: string
    placeholder?: string
    maxLength?: number
    submitLabel?: string
    submit?: (note: { content: string; pinned: boolean }) => void | Promise<void>
  }>(),
  {
    title: 'Add note',
    description: 'Notes stay internal. Only your team sees them.',
    placeholder: 'What should the team know?',
    maxLength: 2000,
    submitLabel: 'Add note',
  }
)

const open = defineModel<boolean>('open', { default: false })

const emit = defineEmits<{ submit: [note: { content: string; pinned: boolean }] }>()

const form = reactive({ content: '', pinned: false })
const pending = ref(false)

watch(open, (value) => {
  if (value) {
    form.content = ''
    form.pinned = false
    pending.value = false
  }
})

const remaining = computed(() => props.maxLength - form.content.length)

async function submit() {
  const note = { content: form.content, pinned: form.pinned }
  emit('submit', note)
  pending.value = true
  try {
    await props.submit?.(note)
    open.value = false
  } finally {
    pending.value = false
  }
}
</script>

<template>
  <FormDialog
    :open="open"
    size="lg"
    :title="title"
    :description="description"
    :submit-label="submitLabel"
    :submit-disabled="pending || form.content.trim() === ''"
    @close="open = false"
    @submit="submit"
  >
    <FieldGroup>
      <Field>
        <Label>Note</Label>
        <Textarea v-model="form.content" name="content" rows="5" :maxlength="maxLength" :placeholder="placeholder" />
        <Description aria-live="polite" :class="remaining > 200 ? 'sr-only' : undefined">
          {{ remaining <= 200 ? `${remaining} characters left.` : '' }}
        </Description>
      </Field>
      <CheckboxField>
        <Checkbox v-model="form.pinned" name="is_pinned" />
        <Label>Pin this note</Label>
        <Description>Pinned notes stay at the top of the list.</Description>
      </CheckboxField>
    </FieldGroup>
  </FormDialog>
</template>