ultisuite-client/components/gmail/contacts-page/contact-label-picker-block.tsx

"use client"

import { useLayoutEffect, useRef, type ComponentType, type ReactNode } from "react"
import { Check, Minus, Plus } from "lucide-react"
import { Icon } from "@iconify/react"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"
import type { LabelRowItem } from "@/lib/sidebar-nav-data"
import type { LabelPickerVisual } from "@/lib/label-picker-visual"
import { LabelPickerLeadingVisual } from "@/components/gmail/email-label-picker-block"

export type ContactLabelPresence = "none" | "some" | "all"

export type ContactLabelPickerItemComponent = ComponentType<{
  children: ReactNode
  onSelect?: (event: Event) => void
  className?: string
}>

function LabelPickerCheckboxVisual({
  checked,
}: {
  checked: boolean | "indeterminate"
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "pointer-events-none inline-flex size-4 shrink-0 items-center justify-center rounded-[2.5px] border-[1.5px] border-[#c2c2c2] bg-transparent",
        checked === true && "border-[#0b57d0] bg-[#0b57d0] text-white",
        checked === "indeterminate" && "border-[#0b57d0] bg-[#0b57d0] text-white",
      )}
    >
      {checked === true ? (
        <Check className="size-3 stroke-[2.5] text-white" />
      ) : checked === "indeterminate" ? (
        <Minus className="size-3 stroke-[2.5] text-white" />
      ) : null}
    </span>
  )
}

export function ContactLabelPickerBlock({
  query,
  onQueryChange,
  labelRows,
  resolveLabelVisual,
  Item,
  getLabelPresence,
  onToggleLabel,
  onCreateLabel,
  listClassName,
  searchAutoFocus = true,
}: {
  query: string
  onQueryChange: (v: string) => void
  labelRows: LabelRowItem[]
  resolveLabelVisual: (labelId: string) => LabelPickerVisual
  Item: ContactLabelPickerItemComponent
  getLabelPresence: (labelId: string) => ContactLabelPresence
  onToggleLabel: (labelId: string) => void
  onCreateLabel: (labelText: string) => void
  listClassName?: string
  searchAutoFocus?: boolean
}) {
  const searchInputRef = useRef<HTMLInputElement>(null)

  useLayoutEffect(() => {
    if (!searchAutoFocus) return
    let inner = 0
    const outer = requestAnimationFrame(() => {
      inner = requestAnimationFrame(() => {
        searchInputRef.current?.focus({ preventScroll: true })
      })
    })
    return () => {
      cancelAnimationFrame(outer)
      if (inner) cancelAnimationFrame(inner)
    }
  }, [searchAutoFocus])

  const q = query.trim().toLowerCase()
  const available = labelRows.filter((r) => r.enabled !== false)
  const filtered = available.filter(
    (row) => q.length === 0 || row.label.toLowerCase().includes(q),
  )
  const trimmed = query.trim()
  const hasExact = available.some(
    (row) => row.label.toLowerCase() === trimmed.toLowerCase(),
  )
  const canCreate = trimmed.length > 0 && !hasExact

  return (
    <>
      <div
        className="shrink-0 border-b border-[#eceff1] p-2"
        onPointerDown={(e) => e.stopPropagation()}
      >
        <Input
          ref={searchInputRef}
          value={query}
          onChange={(e) => onQueryChange(e.target.value)}
          placeholder="Rechercher ou créer un libellé…"
          aria-label="Rechercher ou créer un libellé"
          className="h-8 border-[#dadce0] text-sm shadow-none"
          autoComplete="off"
          onPointerDown={(e) => e.stopPropagation()}
          onClick={(e) => e.stopPropagation()}
          onKeyDown={(e) => e.stopPropagation()}
        />
      </div>
      <div className={cn("min-h-0 overflow-y-auto py-1", listClassName ?? "max-h-52")}>
        {canCreate ? (
          <Item
            onSelect={(e) => {
              e.preventDefault()
              onCreateLabel(trimmed)
            }}
          >
            <Plus className="size-[18px] shrink-0 text-[#0b57d0]" strokeWidth={1.5} />
            <span className="min-w-0 flex-1 text-[#0b57d0]">
              Créer le libellé « {trimmed} »
            </span>
          </Item>
        ) : null}
        {filtered.map((row) => {
          const presence = getLabelPresence(row.id)
          const boxChecked: boolean | "indeterminate" =
            presence === "all" ? true : presence === "some" ? "indeterminate" : false
          return (
            <Item
              key={row.id}
              onSelect={(e) => {
                e.preventDefault()
                onToggleLabel(row.id)
              }}
            >
              <LabelPickerCheckboxVisual checked={boxChecked} />
              {row.icon ? (
                <span className="flex h-5 w-5 shrink-0 items-center justify-center">
                  <Icon
                    icon={row.icon}
                    className="size-[18px] shrink-0 text-[#5f6368]"
                    aria-hidden
                  />
                </span>
              ) : (
                <LabelPickerLeadingVisual visual={resolveLabelVisual(row.id)} />
              )}
              <span className="min-w-0 flex-1 truncate">{row.label}</span>
            </Item>
          )
        })}
        {filtered.length === 0 && !canCreate ? (
          <div className="px-3 py-2 text-sm text-[#5f6368]">
            Aucun libellé correspondant
          </div>
        ) : null}
      </div>
    </>
  )
}